移動端通過ajax上傳圖片(檔案)並在前台展示——通過H5的FormData對象

來源:互聯網
上載者:User

標籤:傳輸   方法   doc   res   使用   png   accept   test   img   

前些時候遇到移動端需要上傳圖片和視頻的問題,之前一直通過ajax非同步提交資料,所以在尋找通過ajax上傳檔案的方法。發現了H5裡新增了一個FormData對象,通過這個對象可以直接綁定html中的form元素,然後通過ajax提交的時候直接提交這個對象就好了。

 

 在移動端調用視頻和音頻:

<input type="file" accept="image/*" capture="camera">     //調用相簿和網路攝影機<input type="file" accept="video/*" capture="camcorder">  //視頻<input type="file" accept="audio/*" capture="microphone">  //音頻

 

以上傳圖片為例

html中的代碼:

<input type="file" id="file" name="file" accept="image/*" />

當然如果你想要上傳多張圖片也是可以的,只要加上“multiple”屬性

<input type="file" id="file" name="file" accept="image/*" multiple />

(其實只需要寫上type和id就可以了)

我們可以通過列印台看到傳到的裡面的內容

var file = document.getElementById("file");console.log(file.files);

得到的是一個類似於一個數組的泛類集合,我們可以像取數組一樣取到第i個:file.files[i]

 

 

 

在JS中,我們需要先new一個FormData對象

var form = new FormData();

然後把我們傳完的圖片添加到這個FormData對象中去,這裡用到append

form.append("fileImg",file.files);

然後我們就可以通過ajax向後台傳遞資料了,我習慣用的jquery的ajax

$.ajax({      type: "post",      url: "傳輸的地址",      data: form,      contentType: false, // 注意這裡應設為false      processData: false,    //false      cache: false,    //緩衝      success: function(data){          console.log(data);            }})

注意:裡面設為false的三個參數:

contentType:發送資訊至伺服器時內容編碼類別型,預設是application/x-www-form-urlencoded

processData:預設會把data的資料轉為字串

cache:設定為 false 將不緩衝此頁面

這裡如果是跨域傳輸的話會出現問題,傳檔案時是不能設定dataType:"jsonp"的,會出現問題,想要跨域的話盡量不要使用這個方法(是我比較菜還不會傳,手動捂臉,歡迎指導),當然通過後台設定允許訪問的地址也可以

FormData對象是封閉的,沒有辦法通過console.log(form)列印到列印台,想要查看form對象裡的值可以通過瀏覽器調試工具的Network裡查看

 

通常我們傳遞資料當然不是只傳檔案,因此我們需要把要傳的每一條都append到FormData裡。

我們可以在html中加一個form表單並擷取到它的id,然後form表單中的資料可以直接綁到FormData裡

html:

<form id="formTest">    <input type="text" name="name1" />    <input type="text" name="name2"/>    <input type="file" name="file" id="file"/></form>

js:

var formTest = document.getElementById("formTest");var form = new FormData(formTest);

這樣會自動擷取到form表單中name和value並添加到formdata對象裡

 

通常我們在傳入圖片後,會想讓圖片在前台頁面展示,這裡我們要用到H5的FileReader。

我的做法是:前端放一張圖片,點擊圖片的時候觸發隱藏的上傳檔案的input,input改變時調用prewviewImg方法

html:

<div class="pic" id="wholeImg"><img id="img1" src="img/a11.png"/></div><input type="file" name="whole" id="whole" style="display: none;" capture="camera" onchange="previewImg(this)" />

js:

$("#wholeImg").click(function(){    $("#whole").click();})function previewImg(file){    //判斷是否支援FileReader    if (window.FileReader) {        var reader = new FileReader();    } else {        alert("您的裝置不支援圖片預覽功能,如需該功能請升級您的裝置!");    }    var preDiv = document.getElementById("wholeImg");    //擷取圖片    if (file.files && file.files[0]){        var reader = new FileReader();         reader.onload = function(e){              var img = document.getElementById("img1");            img.setAttribute("src",e.target.result);        }        reader.readAsDataURL(file.files[0]);    }}

這樣就可以顯示圖片的內容了

 

移動端通過ajax上傳圖片(檔案)並在前台展示——通過H5的FormData對象

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.