上傳多張照片並實現預覽過程

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>