小編給大家分享一下使用H5做出上傳圖片功能的方法，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

成都創(chuàng)新互聯(lián)成立與2013年，先為浦東等服務(wù)建站，浦東等地企業(yè)，進行企業(yè)商務(wù)咨詢服務(wù)。為浦東企業(yè)網(wǎng)站制作PC+手機+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

知識點：input file、base64、FileReader、canvas壓縮、blob、btoa編碼和atob解碼、FormData。

html dom節(jié)點：

默認可以選擇一個文件。需要上傳多張?？梢栽黾觤ultiple="true" 屬性。一般使用opacity:0;將默認樣式隱藏，然后再重新寫其樣式。

1、創(chuàng)建對象

var fileReader = new FileReader();

2、判斷瀏覽器是否兼容----ie8下不支持

if( window.FileReader )

3、狀態(tài)常量

在下面例子中，可以分別讀取當前狀態(tài)。

4、屬性

5、方法

6、事件處理

BASE64:

我們用chrome打開一張圖片，在resources里面顯示的就是圖片的base編碼(實際上base編碼比原圖片稍大)

圖片的base64編碼也就是將一張圖片編碼成一個字符串，我們可以用這個字符串給img標簽的src賦值，這樣我們就可以看到這張圖片。

如何編寫：

在html中：

在css中：

background-image:url(data:image/gif;base64,R0lGODlhBAABAIABAMLBwfLx8SH5BAEAAAEALAAAAAAEAAEAAAICRF4AOw==);

優(yōu)缺點：

優(yōu)點：1、減少了http請求；2、可以被gzip；3、沒有跨域問題；4、無需考慮在更新圖片時緩存問題。

缺點：1、ie8以下不支持；2、不論是寫在css文件還是html文件中，增加了文件的大小；3、圖片大了之后，程序員編碼相當困難；

應(yīng)用：

根據(jù)實際需求來選擇base64顯示圖片，或者選擇css sprite，或者直接使用png等

一般使用場景：很少被更新，實際尺寸很小，在系統(tǒng)中大量使用。

canvas壓縮：

在移動應(yīng)用場景中，用戶上傳的圖片一般很大，會導(dǎo)致上傳時間過長而失敗，既浪費時間也浪費流量，更影響用戶體驗。我們可以使用canvas的drawImage方法的圖形裁剪功能。

1、新建image對象，給其src復(fù)制base64值，在其監(jiān)聽onload事件；

2、在onload事件方法中新建canvas對象，獲取上下文context；

3、設(shè)置裁剪比例，調(diào)用drawImage方法填充圖片。

4、通過toDataUrl方法獲取裁剪之后的base64值。

詳細見下例。

Blob

在傳輸一些比較大的圖片的base64是容易出現(xiàn)轉(zhuǎn)發(fā)錯誤，這里我們可以將base64轉(zhuǎn)換成blob字段寫到form表單中提交到后臺。一般blob和base64之間的相互轉(zhuǎn)換通過fileReader 的readAsDataUrl和ArrayBuffer的charCodeAt方法。下面列舉幾個相互轉(zhuǎn)換的方法。來自（http://jsperf.com/blob-base64-conversion）

 var blobToBase64 = function(blob, cb) {
     var reader = new FileReader();
     reader.onload = function() {
       var dataUrl = reader.result;
       var base64 = dataUrl.split(',')[1];
       cb(base64);
     };
     reader.readAsDataURL(blob);
     };
 var base64ToBlob = function(base64, cb) {
     var binary = atob(base64);
     var len = binary.length;
     var buffer = new ArrayBuffer(len);
     var view = new Uint8Array(buffer);
     for (var i = 0; i < len; i++) {
       view[i] = binary.charCodeAt(i);
     }
     cb(new Blob([view]));
     };
 var base64ToBlobSync = function(base64) {
     var binary = atob(base64);
     var len = binary.length;
     var buffer = new ArrayBuffer(len);
     var view = new Uint8Array(buffer);
     for (var i = 0; i < len; i++) {
       view[i] = binary.charCodeAt(i);
     }
     var blob = new Blob([view]);
     return blob;
     };
 var blobToBase64_2 = function(blob, cb) {
     var reader = new FileReader();
     reader.onload = function() {
       var buffer = reader.result;
       var view = new Uint8Array(buffer);
       var binary = String.fromCharCode.apply(window, view);
       var base64 = btoa(binary);
       cb(base64);
     };
     reader.readAsArrayBuffer(blob);
     };

btoa 與 atob:      ---在對base64轉(zhuǎn)blob時就需要用atob對base64進行解碼

btoa("javascript");     //"amF2YXNjcmlwdA=="
atob("amF2YXNjcmlwdA==") ;       //"javascript"

注意：在需要轉(zhuǎn)碼中文時，需要用encodeURIComponent方法對中文處理，解碼時用decodeURIComponent

btoa(encodeURIComponent("我喜歡 javascript"));    //"JUU2JTg4JTkxJUU1JTk2JTlDJUU2JUFDJUEyJTIwamF2YXNjcmlwdA=="
decodeURIComponent(atob("JUU2JTg4JTkxJUU1JTk2JTlDJUU2JUFDJUEyJTIwamF2YXNjcmlwdA=="));   //"我喜歡 javascript"
FormData:

我們只需要使用new FormData()創(chuàng)建對象，然后append鍵值對，后用ajax向后臺發(fā)生即可。

這里是往FormData對象添加blob字段。

注：使用Ajax將這個FormData對象提交到服務(wù)器上時,所發(fā)送的HTTP請求頭中代表那個Blob對象所包含文件的文件名稱的"Content-Disposition"請求頭的值會是一個空字符串,這會引發(fā)某些服務(wù)器程序上的錯誤.從Gecko 7.0開始,這種情況下發(fā)送的文件名稱改為"blob"這個字符串.

 
 
 
    



 

 拍攝
   
 
 
 
 

看完了這篇文章，相信你對使用H5做出上傳圖片功能的方法有了一定的了解，想了解更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！