Html5實現單張、多張圖片上傳功能

前言

今天我們聊聊圖片上傳，單張Or多張，如今，各大圖片上傳外掛數不勝數，例如：Jquery的verupload.js，jQuery File Upload、Uploadify、jQuery.filter等等。 But。上面說到的這些插件，今天我們不談，我們來看看使用HTML5中的FileReader 如何實現圖片的單張及多張預覽、刪除、上傳等功能。先看下實現後的效果如下：

這塊是使用者點擊按鈕其中我們最重要的一句話是input type=file 和給了一個multiple屬性，可以滿足多張圖片上傳

 <div class=form-group form-row> <label class=col-sm-2 control-label uText>俱樂部相簿</label><div class=row> <div class=col-xs-10 col-sm- 8 mTop5> <label <input type=file accept=image/* name=ClubImagesUpload id=ClubImagesUpload class=hide multiple=multiple> <img src=/Images/registerNewSite/btn_addimg.png class=addImg/> </label> </div> </div></div>

下面這塊區域是用於圖片預覽的

 <div class=form-group form-row id=preViewMore><div class=row> <div class=col-xs-9> <div id=clubInputImagePreview class=col-sm-9 img-preview img-preview-sm ></div> </div> </div></div>

什麼？連樣式你都要看，還有沒有人性(苦笑臉)

首先我們分析下上面的html，我們用一個label把input和一個img標籤包起來了，我們希望點擊效果圖那個+號圖片，就能彈出選擇相片的對話框，所以，我們需要先給label來一個點擊事件：

 $(#btnClubImg).click(function() { //TODO Something});

接著我們再看，因為我們是要取得上傳的文件，而我們的文件主要是在input上，所以，我們先將input標籤取得到：

 $(#btnClubImg).click(function() { var $input = $(#ClubImagesUpload); console.log($input);//列印目前元素});

我們將當前input元素標籤列印出來看看是個什麼東東

我們展開第一項會發現files裡面length長度是0

好，我們繼續分析，因為我們想要能當input框改變的時候，說簡單點就是有選擇到文件的時候，我們能獲取到當前選擇的文件，這個和獲取input框文字輸入是一樣的道理，所以，經過分析，我們知道需要為input標籤加一個change事件：

 $(#btnClubImg).click(function() { var $input = $(#ClubImagesUpload); console.log($input); $input.on(change, function () { console.log(this);//列印改變後的當前元素});});

讓我們來瞥一眼，取得到改變後的input元素裡面有些啥東東：

這裡很清楚得可以看到，我們獲取到了選擇的圖片，包括有最後修改事件，圖片名稱，大小以及圖片類型(有了文件類型，我們就可以判斷當前用戶選擇的是否是圖片不是嗎(斜眼笑)) 同樣，這是單一文件的， 如果是多個文件，就會有多個file

接著往下看，透過列印輸出我們可以看到，我們再input 標籤的files元素上已經拿到了我們想要的文件信息，我們只需要獲取它們就行了：

 var files = this.files; var length = files.length;

這樣，我們就可以獲得所有文件，以及文件的個數，那這裡問題來了，我們如果是選擇多個文件，如果將其依次輸出並展示到頁面上呢？看到上面標註的四個字，腦袋中有沒有閃現出兩個字呢？循環

 $.each(files, function (key, value) { //TOTO Something });

透過將上面得到的files 循環，我們可以依序得到每個檔案的資訊。這樣，你就不僅可以將其依序輸出，如果你願意，你還可以將其送上天～

 var fileReader = new FileReader();//實例化一個FileReader物件var file_ = files[key];//取得目前檔案if (/^image///w+$/.test(file_.type)) {//將目前檔案進行正規匹配，看看是否為選擇的圖片fileReader.onload = function() {//當讀取操作完成時呼叫} }

有必要延伸下FileReader的知識點：

FileReader主要用於將文件內容讀入內存，透過一系列非同步接口，可以在主線程中存取本地文件。

使用FileReader對象，web應用程式可以非同步的讀取儲存在使用者電腦上的檔案(或原始資料緩衝)內容，可以使用File物件或Blob物件來指定所要處理的檔案或資料。

回到主題，我們已經能夠得到文件並且得到返回，所以此時，我們只需要展示返回的結果就行了

$(#clubInputImagePreview).css(background-image, url( + this.result + ));

我們將其this.result印出來看看是個什麼東東:

不言而喻，是將圖片轉換成了Base64的資料格式。最後，我們呼叫readAsDataURL 讀取檔案內容，將其用data:url字串表示出來

fileReader.readAsDataURL(value);

這樣，你就可以得到一個簡易的圖片上傳的Demo了，但是並不是最終的，因為你還需要加很多業務進去。例如：得到一張預覽圖片後，當前標籤會被佔用，如果下次循環進來，直接使用原標籤，肯定會將之前的圖片替換，那這肯定不是我們想要的效果，我們希望是能依次展示，而不是替換展示。所以，我們還需要做一些處理：

 $(#clubInputImagePreview).css(background-image, url( + this.result + ));//使用apend再當前元素下追加一個子節點$(#clubInputImagePreview) .append(<img src='/Images/ registerNewSite/btn_r_del.png' class='clubsImage' id='ImgRemove' />);//使用after 向目前兄弟節點追加一個同級節點$(#clubInputImagePreview).after( <div id='clubInputImagePreview1' class='col-sm-9 img-preview img- preview-sm delImg' ></div>);

然後我們追加的刪除圖片，也需要給其點擊事件，讓我們目前的預覽區域消失：

 $(#ImgRemove).click(function () { $(this).parent().remove();});

最後，你會發現結果還不是我們想要的，那是因為當前ID還在，所以無法進行下一步操作，而我們只需要將當前元素的Id Remove掉，然後新增一個同ID的元素，這樣瀏覽器就會認為這是一個新的元素：

 $input.removeAttr(id); var newInput ='<input type=file accept=image/* name=ClubImagesUpload id=ClubImagesUpload class=hide multiple=multiple>'; $(this).append($(newInput));

最後完整JS程式碼如下：

 var intP = 0; $(#btnClubImg).click(function() { var $input = $(#ClubImagesUpload);// console.log($input); $input.on(change, function () {// console.log(this); var files = this.files; var length = files.length; if (intP > 8) { layer.msg('圖片不能再多了～', {}); return; } $.each(files, function (key, value) { var fileReader = new FileReader(); var file_ = files[key ]; if (/^image///w+$/.test(file_.type)) { fileReader.onload = function() { if (intP > 8) { layer.msg('圖片不能再多了～', {}); return; } if (key == 0 && intP == 0) { console.log(this.result); $(#clubInputImagePreview ).css(background-image, url( + this.result + )); $(#clubInputImagePreview) .append( <img src='/Images/registerNewSite/btn_r_del.png' class='clubsImage' id='ImgRemove' />); $(#clubInputImagePreview).after( <div id='clubInputImagePcolview1' class=j-sm-InputImageP.1' 9 img-preview img-preview-sm delImg'></div>); } else { $(#clubInputImagePreview + parseInt(intP) + ).css(background-image, url( + this.result + )); $(#clubInputImagePreview + parseInt(intP) + ).append( <img src='/Images/registerNewSite/btn_r_del.png' class='clubsImage' id='ImgRemove + parseInt(parseInt(1) + parseInt(intP)) +' />); $(#clubInputImagePreview + parIntse(Preview +Intse)( ).after( <div id='clubInputImagePreview + parseInt(parseInt(1) + parseInt(intP)) + 'class='col-sm-9 img-preview img-preview-sm delImg' ></div>); } if (key == 0 && intP == 0) { $(#ImgRemove).click(function () { $(this).parent().remove(); }); } else { $(#ImgRemove + parseInt(parseInt(1) + parseInt(intP)) + ).click(function () { $(this). parent().remove(); }); } intP += parseInt(1); }; fileReader.readAsDataURL(value); } else { layer.msg(格式錯誤<br/>請選擇一個圖片檔案); } }); }); $input.removeAttr(id); var newInput = '<input type=file accept=image/* name= ClubImagesUpload id=ClubImagesUpload class=hide multiple=multiple>'; $(this).append($(newInput)); });

以上所述是小編給大家介紹的Html5實現單張、多張圖片上傳功能，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回覆大家的！