之前瞭解了下Vue，會用Vue寫一些簡單的前端的項目，但是對於原生的Js和ajax是一點都不瞭解。。。。。但是最近要做一個比較簡單的網頁端的相冊功能，領導再三思考之後決定用JS寫，於是這個光榮的任務就落在了我頭上（其實我是個Java出身的）。。。。
好，說正事
我這個東西的需求呢，就是能有一個登錄的接口，登錄進去就可以從自己本地上傳圖片到服務器，並且能夠把他上傳的圖片展示在頁面上。其實我之前有寫過一篇類似的文章關於SSH上傳圖片並把圖片顯示在頁面中，但是之前後端用的SSH，前端用的jsp，現在前端用JS和ajax，後端用的是go，這裏只講前端的，不講後端的。
先貼代碼
index.html(登錄頁面）
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>登錄</title>
</head>
<body style="text-align: center">
<h3 id="title">在線圖庫</h3>
<div id="login">
<input id="accountName" type="text" placeholder="賬號"><br>
<input id="password" type="password" placeholder="密碼"><br>
<input id="submit" type="submit" onclick="login()">
</div>
<style type="text/css">
#title {
margin-top: 100px;
}
#login {
width: 300px;
height: 300px;
padding-top: 50px;
margin: auto;
text-align: left
}
#accountName {
width: 300px;
height: 30px;
border-width: 1px;
border-color: #46a3ff;
}
#password {
width: 300px;
height: 30px;
border-color: #46a3ff;
border-width: 1px;
margin-top: 20px;
}
#submit {
width: 300px;
height: 30px;
border-width: 1px;
border-color: #46a3ff;
background-color: #46a3ff;
color: #fff;
margin-top: 20px;
}
</style>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
function login() {
var accountName = document.getElementById("accountName").value
var password = document.getElementById("password").value
$.ajax({
url: "", //登錄接口url，此處我的刪掉了，自己用的時候就是在這裏添加後端的URL就行了
type: "post", //請求類型 ,
async: false, //返回的數據類型 ,跟後臺配合好 ,一般都是json,
data: {
"name": accountName,
"password": password,
},
success: function (msg) {
console.log(msg)
accountId = msg.data.accountID
console.log(accountId)
window.location.href="upload.html?accountId="+accountId
},
error:function(e){
alert(e.responseJSON.message)
}
})
}
</script>
</body>
</html>
upload.html（上傳圖片和展示圖片的頁面）
<!DOCTYPE html>
<html>
<title>圖庫</title>
<body>
<input id="file" type="file" accept="image/*" />
<div id="preview_box"></div>
<h3>圖片列表</h3>
<div id="list"></div>
<style type="text/css">
#list {
display: flex;
flex-wrap: wrap;
}
#images {
width: 400px;
height: 200px;
margin-right: 20px;
margin-bottom: 40px;
}
#imagesNames {
font-size: 12px;
}
</style>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://gosspublic.alicdn.com/aliyun-oss-sdk-4.4.4.min.js"></script>
<script type="text/javascript">
var loc = location.href;
var n1 = loc.length;//地址的總長度
var n2 = loc.indexOf("=");//取得=號的位置
var id = decodeURI(loc.substr(n2 + 1, n1 - n2));//從=號後面的內容
var userId;
console.log(id)
window.onload = function () {
$.ajax({
url: "" + id, //用戶信息url，這裏我是先根據這個登錄用戶獲取用戶的信息
type: "get", //請求類型 ,
contentType: "application/json; charset=utf-8", //沒有說明 ,就使用默認的
async: false,
dataType: "json",
data: {
"accountID": id,
},
success: function (result) {
console.log(result)
userId = result.data.id
},
})
$.ajax({
url: "", //獲取圖庫信息的URL，根據登錄用戶的ID獲取
type: "get", //請求類型 ,
contentType: "application/json; charset=utf-8", //沒有說明 ,就使用默認的
async: false,
dataType: "json",
success: function (result) {
console.log(result.cloudImages)
var cloudImages = result.cloudImages
var cent = document.getElementById("list");
for (var i = 0; i < cloudImages.length; i++) {
cent.innerHTML += "<div id='images' class='id-w'>" +
"<img id='' src=' " + cloudImages[i].thumbUrl + "' ></img><p id='imagesNames'>" + cloudImages[i].imageName + "</p></div>";//這裏是成功之後採用拼接HTML的形式渲染出來
}
},
})
}
//上傳圖片，監聽id爲file的這個按鈕的事件
document.getElementById("file").addEventListener('change', function (e) {
let file = e.target.files[0]
console.log(file)
var formData = new FormData()
formData.append("images", file)
formData.append("userId", userId)
$.ajax({
url: "", //上傳圖片url
type: "post", //請求類型 ,
processData: false,
contentType: false,
async: false,
data: formData,
success: function (result) {
console.log(result)
if (result.message == "OK") {
alert("上傳成功!")
window.location.reload();//上傳成功頁面重新加載
}
},
})
})
</script>
</body>
</html>
後端是用的go語言，上傳到阿里雲的OSS對象存儲中，這個阿里雲是有SDK可以直接用的。
以上就是一個簡單的在線圖庫的功能，每個登錄用戶只能看到他自己上傳的圖片，後期這個會根據新的需求優化。