多檔案上傳並預覽

利用input 的type='file" 可以實現檔案的上傳，不過只支援單個檔案上傳。只有給input加上multiple屬性才能實現多個檔案同時上傳。
好了，下面我們來實現一個簡單的多圖片上傳並預覽的例子

<div class="input-file-box">
	<span>點選上傳圖片</span>
	<input type="file" name="" id="uploadfile" multiple>
</div>
<div id="img-box"></div>

這是html結構，di=img-box的盒子是後面放預覽圖片的。
下面是js程式碼：

window.onload=function(){
	var input=document.getElementById("uploadfile");
	var div;
	// 當用戶上傳時觸發事件
	input.onchange=function(){
		readFile(this);
	}
	//處理圖片並新增都dom中的函式
	var readFile=function(obj){
		// 獲取input裡面的檔案組
		var fileList=obj.files;
		//對檔案組進行遍歷，可以到控制檯打印出fileList去看看
		for(var i=0;i<fileList.length;
 
i++){
			var reader= new FileReader();
			reader.readAsDataURL(fileList[i]);
			 // 當檔案讀取成功時執行的函式
			reader.onload=function(e){
				div=document.createElement('div');
				div.innerHTML='<img src="'+this.result+'" />';
				document.getElementById("img-box").appendChild(div);
			}
		}
	}
}

接下來分析下實現步驟，具體來看下readFile（）函式

// 獲取input裡面的檔案組
		var fileList=obj.files;

obj.files返回一個FileList物件，該物件裡面有很多屬性，比如我上傳兩個圖片，控制檯列印如下console.log(fileList);

可以看到有有兩個File，下標分別為0,1，長度length為2。點選其中一個File展開可以看到更多詳細的資訊

• lastModified和lastModifiedDate代表檔案的上次修改時間，返回的格式不一樣
• name：檔名，只讀
• size：檔案大小，單位是位元組，只讀
• type：檔案MIME型別，只讀

（ 利用size屬性判斷可以控制上傳的檔案大小，type可以控制上傳的型別，上面FileList的length可以控制上傳的數量 ）

接下來我們對檔案進行遍歷，進入for迴圈，首先例項化一個FileReader介面

var reader= new FileReader();

FileReader介面提供讀取檔案的方法和事件
主要的方法有：

• FileReader.readAsBinaryString(blob/file) // 以二進位制格式讀取檔案內容
• FileReader.readAsText(file, [encoding]) // 以文字(及字串)格式讀取檔案內容，並且可以強制選擇檔案編碼
• FileReader.readAsDataURL(file) // 以DataURL格式讀取檔案內容
• FileReader.abort() // 終止讀取操作

主要的事件有：

• FileReader.onloadstart // 讀取操作開始時觸發
• FileReader.onload // 讀取操作成功時觸發
• FileReader.onloadend // 讀取操作完成時觸發(不論成功還是失敗)
• FileReader.onprogress // 讀取操作過程中觸發
• FileReader.onabort // 讀取操作被中斷時觸發
• FileReader.onerror // 讀取操作失敗時觸發

然後以DataURl格式去讀取當前圖片

reader.readAsDataURL(fileList[i]);

當檔案讀取成功時進入.onload()事件

reader.onload=function(e){
		div=document.createElement('div');
		div.innerHTML='<img src="'+this.result+'" />';
		document.getElementById("img-box").appendChild(div);
}

首先建立一個div和img，然後把它渲染到我們預留的盒子裡去，並載入到頁面中顯示圖片。
這裡的 this.result 獲取檔案讀取的結果，也可以用e.target.result。把結果放在img的src中。（注意看清楚那些引號）
此時就可以看到上傳的圖片被渲染到頁面中了。

修改樣式

多檔案上傳預覽算是完成了，不過原生檔案上傳的樣式並不太好看，如何修改樣式呢，基本做法就是：在input外層套一個div，然後把input的寬高設為100%，並把透明度變為0，然後直接對外層div修改樣式就可以了。

舉個栗子，這個最終的樣式效果圖

還是上面那個html結構

<div class="input-file-box">
	<span>點選上傳圖片</span>
	<input type="file" name="" id="uploadfile" multiple>
</div>
<div id="img-box"></div>

css：

/*外層div*/
.input-file-box{
	border: 1px solid gray;
    width: 150px;
    height: 150px;
    position: relative;
    text-align: center;
    border-radius: 8px;
}
/*文字描述*/
.input-file-box > span{
	display: block;
    width: 100px;
    height: 30px;
    position: absolute;
    top: 0px;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    color: gray;
}
/*input框*/
.input-file-box #uploadfile{
	opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

完成，文中如有錯誤，望大神指點~