之前了解了下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可以直接用的。
以上就是一个简单的在线图库的功能，每个登录用户只能看到他自己上传的图片，后期这个会根据新的需求优化。