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>