1.上传文件之后,想预览上传的图片,input框的accept限制上传文件的类型,multiple为多文件上传,<div id="imglist"></div>用于存放图片。
html代码:
//多文件上传
<input type="file" class="upload_image" id="fileupload" accept="image/*" multiple >
//预览图片
<div id="imglist"> </div>
2.获取上传的文件,多文件的需要遍历file,根据需要判断文件大小,拼接文件路径,将图片显示在<div id="imglist"></div>
js代码:
$("#fileupload").change(function () {
var file = $(this)["0"].files;
var windowURL = window.URL || window.webkitURL;
for (let i = 0; i < file.length; i++) {
//限制图片大小
if (file[i].size > 1024 * 1024 * 2) {
alert('图片大小不能超过 2MB!');
}
//预览图片
var dataURL = windowURL.createObjectURL(file[i]);
$('#imglist').append($('<img/>').attr('src', dataURL));
}
}
3.提交成功后,清空预览图片和文件路径。//清空预览的图片
$('#imglist').empty();
//几个文件状态->未选中文件
var obj = document.getElementById('fileupload') ;
obj.outerHTML=obj.outerHTML;