在做后台管理的时候，遇到这样一个需求，实现多张图片上传并按选中的顺序显示。PS：图片上传的时候是即时上传到服务器，后台返回图片在服务器上的地址，在最后点击提交按钮的时候，把地址传给后端写入数据库即可。
1、input标签，accept=‘image/*‘上传图片格式只要是image就行，multiple实现文件可以多选
<input type="file" id="add-pic2" accept="image/*" multiple>
2、监听选中事件
$("#add-pic2").on("change", function () {
// if (pic_banner.length >= 10 || pic_banner.length + this.files.length >= 10) {
// return swal("最多10张图片");
// }
//递归上传
var files = this.files
files.length && diguiAjax(this.files, 0, this.files.length, function (res, i) {
var obj = {
pic: res.data.list
};
pic_banner.push(obj);
var bannerHtml = "";
bannerHtml = `<div class="pic-wrap pull-left"><span class="closeX" data-index="${res.data.list}">x</span><img src="${res.data.list}" ></div>`;
$(".banner-wrap").append(bannerHtml);
if (i >= files.length) {
document.getElementById(‘add-pic2‘).value = null
}
})
});
//递归上传banner图片
function diguiAjax(files, j, length, cb) {
var ele = files[j];
//压缩图片 lrz压缩图片
lrz(ele).then(function (rst) {
$post({
url: api_www + "/upload_img/uploadImg",
data: {
token: token,
img: rst.base64,
is: 1
},
callback: function (res) {
if (res.code == 1) {
cb(res, j)
if (++j < length) {
diguiAjax(files, j, length, cb)
}
}
}
});
})
}