HTML5實作多張圖片上傳功能_html5教學技巧

圖片上傳之前也有寫過，不過是單張上傳的，最近有個業務需求是需要多張上傳的，於是乎從新改寫了一下

HTML結構：

XML/HTML Code複製內容到剪貼簿

1. div class=class=class=
2. 類>       label>請選擇一個圖片檔案：>
請選擇一個圖片檔案：
3. 請選擇一個圖片檔> label>       input type  id
=
4. "file_input" multiple multiple

div

>

  

順便說下這個上傳的主要邏輯：

·用input標籤並選擇type=file，記得帶multiple，不然就只能單選圖片了 ·綁定好input的change時間， ·重點就是如何處理這個change事件了，使用H5新的FileReader介面讀取檔案並打成base64編碼，之後的事就是與後端同學互動著玩啦

JS代碼： JavaScript Code複製內容到剪貼簿

1. window.onload = function(){   
2.         var input = document.getElementById("file_input");   
3.         var result,div;   
4.     
5.         if(typeof FileReader==='undefined'){   
6.             result.innerHTML = "抱歉，你的浏览器不支持 FileReader";   
7.             input.setAttribute('disabled','disabled');   
8.         }else{   
9.             input.addEventListener('change',readFile,false);   
10.         }
    　　　　　//handler   
11.         function readFile(){   
12.             for(var i=0;i<this.files.length;i++){   
13.                 if (!input['value'].match(/.jpg|.gif|.png|.bmp/i)){　　//判断上传文件格式   
14.                     return alert("上传的图片格式不正确，请重新选择")
    　　　　　　　　　　}   
15.                 var reader = new FileReader();   
16.                 reader.readAsDataURL(this.files[i]);   
17.                 reader.onload = function(e){   
18.                     result = '
    this.result+'" alt=""/>
    ';   
19.                     div = document.createElement('divo                     div.innerHTML = result;   
20.                     document.getElementById(
　　　　　　　　〔　　　　　〔　　〔　}
21.                }            }   
22.     }   
23. 上傳多張圖片就這樣實現了嗎0.0
24. 然而並沒有，這樣只是將圖片轉換成base64編碼後再前端顯示，一刷新什麼都沒有 插入圖片後，開啟開發者工具看html結構是這樣的

 

現實的做法是，我們在處理函數裡將檔案佇列裡的檔案傳送到後端，後端同學呢返回檔案對應的MD5加密過檔案和路徑給前端，前端就拿著這個路徑渲染到頁面上。

之後再把MD5檔案傳回給後端，因為上傳完後前端一般有刪除圖片的操作，回傳目的就是告訴後端確認那些圖片是我們想要的，後端存入資料庫裡。

說下用jquery如何互動吧

JavaScript Code

複製內容到剪貼簿

1. 函數 readFile(){   
2.             var fd =  fd = 
            
3. 對於(var(var(var
這樣🎜>.files.length;i ){   
4.                 var 🎜>                 reader.readAsDataURL(
這
5. .s[5]);                 fd.append(i,這
6.                 $.ajax({                        url : ''
                    輸入： '貼文'
7. ，                     資料 : fd,                        成功 : 
8. 函數                        con以ole.log(data)                      ★★}    
9.                 })   
10. }      
11. FormData也是H5的新接口，用來模擬表單控制項的提交，最大的好處呢就是可以提交二進位檔 然後成功的回呼裡面我們取回了想要的資料之後呢，就可以將圖片插進去頁啦，類似之前的做法~
12. 上個效果圖：
13. 以上就是本文的全部內容，希望對大家的學習有所幫助。
譯：
14. http://www.cnblogs.com/weapon-x/p/5237064.html