圖片上傳之前也有寫過，不過是單張上傳的，最近有個業務需求是需要多張上傳的，於是乎從新改寫了一下
HTML結構：
XML/HTML Code複製內容到剪貼簿
- div class=class=class=
- 類>
label>請選擇一個圖片檔案：>
請選擇一個圖片檔案：-
請選擇一個圖片檔> label>
input type id
=-
"file_input" multiple multiple
div
>
順便說下這個上傳的主要邏輯：
·用input標籤並選擇type=file，記得帶multiple，不然就只能單選圖片了
·綁定好input的change時間，
·重點就是如何處理這個change事件了，使用H5新的FileReader介面讀取檔案並打成base64編碼，之後的事就是與後端同學互動著玩啦
JS代碼：
JavaScript Code複製內容到剪貼簿
-
window.onload = function(){
-
var input = document.getElementById("file_input");
-
var result,div;
-
-
if(typeof FileReader==='undefined'){
-
result.innerHTML = "抱歉，你的浏览器不支持 FileReader";
-
input.setAttribute('disabled','disabled');
-
}else{
-
input.addEventListener('change',readFile,false);
-
}
-
function readFile(){
-
for(var i=0;i<this.files.length;i++){
-
if (!input['value'].match(/.jpg|.gif|.png|.bmp/i)){
-
return alert("上传的图片格式不正确，请重新选择")
}
-
var reader = new FileReader();
-
reader.readAsDataURL(this.files[i]);
-
reader.onload = function(e){
-
result = '
this
.result+'" alt=""/>
-
div = document.createElement('divo div.innerHTML = result;
-
document.getElementById(
〔 〔 〔 } -
}
}
- }
-
上傳多張圖片就這樣實現了嗎0.0
- 然而並沒有，這樣只是將圖片轉換成base64編碼後再前端顯示，一刷新什麼都沒有
插入圖片後，開啟開發者工具看html結構是這樣的
現實的做法是，我們在處理函數裡將檔案佇列裡的檔案傳送到後端，後端同學呢返回檔案對應的MD5加密過檔案和路徑給前端，前端就拿著這個路徑渲染到頁面上。
之後再把MD5檔案傳回給後端，因為上傳完後前端一般有刪除圖片的操作，回傳目的就是告訴後端確認那些圖片是我們想要的，後端存入資料庫裡。
說下用jquery如何互動吧
JavaScript Code
複製內容到剪貼簿
-
函數 readFile(){
-
var fd = fd =
-
對於(var(var(var
這樣🎜>.files.length;i ){ -
var 🎜>
reader.readAsDataURL(
這.s[5]);
fd.append(i,這
- $.ajax({
url : ''
輸入： '貼文'- ，
資料 : fd,
成功 :
- 函數 con以ole.log(data)
★★}
-
})
-
}
- FormData也是H5的新接口，用來模擬表單控制項的提交，最大的好處呢就是可以提交二進位檔
然後成功的回呼裡面我們取回了想要的資料之後呢，就可以將圖片插進去頁啦，類似之前的做法~
- 上個效果圖：
-
以上就是本文的全部內容，希望對大家的學習有所幫助。
譯：- http://www.cnblogs.com/weapon-x/p/5237064.html
