簡(jiǎn)單HTML5移動(dòng)端（客戶端）圖片上傳

snifes 發(fā)布于2019-08-26 10:45 / 603人閱讀

摘要：上傳我們一般都是用控件。當(dāng)你用此控件時(shí)，你就授權(quán)了網(wǎng)頁(yè)和服務(wù)器訪問(wèn)對(duì)應(yīng)的文件，就可以得到對(duì)象。

上傳我們一般都是用“input[type=file]”控件。當(dāng)你用此控件時(shí)，你就授權(quán)了網(wǎng)頁(yè)和服務(wù)器訪問(wèn)對(duì)應(yīng)的文件，就可以得到File對(duì)象。

1. accept屬性

該屬性表明了服務(wù)器端可接受的文件類型，可以限制你手機(jī)選擇相關(guān)的文件，如果限制多個(gè)，可以用逗號(hào)分割，下面的代碼就表示只能選擇圖片與音頻相關(guān)的文件

2. change事件

一般選擇文件都會(huì)使用“change”事件，下面的代碼就是綁定了change事件，彈出文件大小

var upload = document.getElementById("upload");
upload.addEventListener("change", function() {
  var file = upload.files[0];
  alert(file.size);
}, false);

有些手機(jī)瀏覽器在點(diǎn)擊的時(shí)候，會(huì)彈出鍵盤(pán)選擇，我用onfocus="this.blur()"，來(lái)強(qiáng)制失去焦點(diǎn)

3. File對(duì)象

用戶所選擇的文件都存儲(chǔ)在了一個(gè)FileList對(duì)象上，其中每個(gè)文件都對(duì)應(yīng)了一個(gè)File對(duì)象
File對(duì)象負(fù)責(zé)處理那些以文件形式存在的二進(jìn)制數(shù)據(jù)，也就是操作本地文件
File對(duì)象是Blob的特殊類型，即大塊的二進(jìn)制數(shù)據(jù)，F(xiàn)ile對(duì)象的尺寸及類型等屬性都繼承自Blob

File對(duì)象可以通過(guò)3種方式獲取

元素上選擇文件后返回的FileList對(duì)象中的成員

拖放操作【Drag或Drop】生成的 DataTransfer對(duì)象內(nèi)files屬性中的成員

document.getElementById("upload").files[0]//選取第一個(gè)文件對(duì)象

4. formData

利用FormData對(duì)象，可以使用鍵值對(duì)來(lái)模擬一個(gè)完整的表單，然后使用XMLHttpRequest發(fā)送這個(gè)"表單"
使用FormData的最大優(yōu)點(diǎn)就是我們可以異步上傳一個(gè)二進(jìn)制文件

  var formData = new FormData();
  formData.append("name", "value");//普通鍵值對(duì)
  formData.append("blob", blob); //傳遞一個(gè)blob對(duì)象
  formData.append("file", file); //傳遞一個(gè)file對(duì)象
  var oReq = new XMLHttpRequest();
  oReq.open("POST", "http://xx.com");
  oReq.send(formData);