上传多张照片并实现预览过程

Posted 2020-12-29 dyy-dida

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>