亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

簡單HTML5移動端（客戶端）圖片上傳

snifes / 644人閱讀

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

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

1. accept屬性

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

2. change事件

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

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

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

3. File對象

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

File對象可以通過3種方式獲取

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

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

document.getElementById("upload").files[0]//選取第一個文件對象
4. formData

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

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/106713.html

相關(guān)文章

  • HTML5 進(jìn)階系列：文件上傳下載

    摘要：前言中提供的文件在前端中有著豐富的應(yīng)用，上傳下載讀取內(nèi)容等在日常的交互中很常見。構(gòu)造函數(shù)中的第一個參數(shù)是一個數(shù)組，可以存放對象對象對象和字符串。通過構(gòu)造函數(shù)創(chuàng)建一個對象該對象有以下方法中斷讀取操作。 前言 HTML5 中提供的文件API在前端中有著豐富的應(yīng)用，上傳、下載、讀取內(nèi)容等在日常的交互中很常見。而且在各個瀏覽器的兼容也比較好，包括移動端，除了 IE 只支持 IE10 以上的版本...

    learn_shifeng 評論0 收藏0

  • 前端常用插件、工具類庫匯總

    摘要：頁面調(diào)試騰訊開發(fā)維護(hù)的代碼調(diào)試發(fā)布，錯誤監(jiān)控上報(bào)，用戶問題定位。同樣是由騰訊開發(fā)維護(hù)的代碼調(diào)試工具，是針對移動端的調(diào)試工具。前端業(yè)務(wù)代碼工具庫。動畫庫動畫庫，也是目前通用的動畫庫。 本人微信公眾號：前端修煉之路，歡迎關(guān)注 本篇文章整理自己使用過的和看到過的一些插件和工具，方便日后自己查找和使用。 另外，感謝白小明，文中很多的工具來源于此。 彈出框 layer：http://layer....

    GitCafe 評論0 收藏0

  • JavaScript精編干貨

    摘要：老姚淺談怎么學(xué)鑒于時(shí)不時(shí)，有同學(xué)私信問我老姚，下同怎么學(xué)前端的問題。擼碼聽歌，全局控制。 淺析用 js 解析 xml 的方法 由于項(xiàng)目上需要解析 xml，于是各種百度，然后自己總結(jié)了下各個主流瀏覽器解析 xml 的方法，只能是很淺顯的知道他的用法，但是還沒有深層次的研究。 裝 X - 建立自己的斗圖網(wǎng)站庫 之前加過一個斗圖群，看到很多經(jīng)典的表情，然后就收藏到了 QQ， 迫于本屌絲開不起...

    Fourierr 評論0 收藏0

  • html5 上傳本地圖片處理各種問題

    摘要：原文還是在簡書上上傳本地圖片處理各種問題這是最近給公司寫一個項(xiàng)目，項(xiàng)目要求大概是這樣子上傳手機(jī)本地圖片，然后裁剪后加的需求能夠旋轉(zhuǎn)圖片，用于裁剪后面加的需求填寫各種文字，選擇顏色，之后把文字和個相關(guān)的圖片，水印到裁剪的圖片上，上傳服務(wù)器生成 原文還是在簡書上： html5 上傳本地圖片處理各種問題 這是最近給公司寫一個項(xiàng)目，項(xiàng)目要求大概是這樣子：1.上傳手機(jī)本地圖片，然后裁剪（后加的需...

    iOS122 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<