function selectImage(imgFile){//上传的多张图片var allFiles = imgFile.files;var imgArr = [];for(var i=0;i<allFiles.length;i++){var file = allFiles[i];//添加一层过滤 ???????var rFilter = /^(image\/bmp|image\/gif|image\/jpeg|image\/png|image\/tiff)$/i; ???????if(!rFilter.test(file.type)) { ???????????alert("文件格式必须为图片"); ???????????return; ???????} ???????????????var reader = new FileReader(); ???????reader.readAsDataURL(file); ???????reader.onload = function(e){ ???????//计算最后一个窗口right边距，当时处于第4个的时候，right=0 ???????????if((allFiles.length + 1)%4 == 0){ ???????????????document.getElementById("uploadBtn").style.marginRight = "0px"; ???????????} ???????????//以下就是将所有上传的图片回显到页面上，如果需要用canvas进行剪裁再回显以下代码就放入到canvas中 ???????????var li = document.createElement(‘li‘); ???????????li.className = "upload-li"; ???????????li.innerHTML = ‘<div class="item image">‘+ ???????????????????????????????‘<img class="upload-image" src="‘+e.target.result+‘"/>‘+ ???????????????????????????‘</div>‘; ???????????document.getElementById("uploadUL").insertBefore(li, document.getElementById("uploadBtn")); ???????}}}<input type="file" multiple onchange="selectImage(this)" accept="image/gif, image/jpeg, image/png" id="upload" >
<ul id="uploadUL"></ul>
上传多张照片并实现预览过程
原文地址：https://www.cnblogs.com/dyy-dida/p/9466912.html