国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

snifes / 586人閱讀

摘要：上傳我們一般都是用控件。當你用此控件時，你就授權了網頁和服務器訪問對應的文件，就可以得到對象。

上傳我們一般都是用“input[type=file]”控件。當你用此控件時，你就授權了網頁和服務器訪問對應的文件，就可以得到File對象。

1. accept屬性

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

2. change事件

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

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

有些手機瀏覽器在點擊的時候，會彈出鍵盤選擇，我用onfocus="this.blur()"，來強制失去焦點

3. File對象

用戶所選擇的文件都存儲在了一個FileList對象上，其中每個文件都對應了一個File對象
File對象負責處理那些以文件形式存在的二進制數據，也就是操作本地文件
File對象是Blob的特殊類型，即大塊的二進制數據，File對象的尺寸及類型等屬性都繼承自Blob

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

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

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

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

利用FormData對象，可以使用鍵值對來模擬一個完整的表單，然后使用XMLHttpRequest發送這個"表單"
使用FormData的最大優點就是我們可以異步上傳一個二進制文件

  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);

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/106713.html

相關文章

  • HTML5 進階系列：文件上傳下載

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

    learn_shifeng 評論0 收藏0

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

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

    GitCafe 評論0 收藏0

  • JavaScript精編干貨

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

    Fourierr 評論0 收藏0

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

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

    iOS122 評論0 收藏0

發表評論

0條評論

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