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 οnchange="selectImage(this)" accept="image/gif, image/jpeg, image/png" id="upload" >
<ul id="uploadUL"></ul>