前些時(shí)候遇到移動(dòng)端需要上傳圖片和視頻的問題，之前一直通過ajax異步的提交數(shù)據(jù)，所以在尋找通過ajax上傳文件的方法。發(fā)現(xiàn)了H5里新增了一個(gè)FormData對(duì)象，通過這個(gè)對(duì)象可以直接綁定html中的form元素，然后通過ajax提交的時(shí)候直接提交這個(gè)對(duì)象就好了。

?

?在移動(dòng)端調(diào)用視頻和音頻：

<input type="file" accept="image/*" capture="camera"> 　　//調(diào)用相冊(cè)和攝像頭 <input type="file" accept="video/*" capture="camcorder">　　//視頻 <input type="file" accept="audio/*" capture="microphone">　　//音頻

?

以上傳圖片為例

html中的代碼：

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

當(dāng)然如果你想要上傳多張圖片也是可以的，只要加上“multiple”屬性

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

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

我們可以通過打印臺(tái)看到傳到的里面的內(nèi)容

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

得到的是一個(gè)類似于一個(gè)數(shù)組的泛類集合，我們可以像取數(shù)組一樣取到第i個(gè)：file.files[i]

?

?

?

在JS中，我們需要先new一個(gè)FormData對(duì)象

var form = new FormData();

然后把我們傳完的圖片添加到這個(gè)FormData對(duì)象中去，這里用到append

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

然后我們就可以通過ajax向后臺(tái)傳遞數(shù)據(jù)了，我習(xí)慣用的jquery的ajax

$.ajax({type: "post",url: "傳輸?shù)牡刂?#34;,data: form,contentType: false, // 注意這里應(yīng)設(shè)為falseprocessData: false, //falsecache: false, //緩存success: function(data){console.log(data); } })

注意：里面設(shè)為false的三個(gè)參數(shù)：

contentType：發(fā)送信息至服務(wù)器時(shí)內(nèi)容編碼類型，默認(rèn)是application/x-www-form-urlencoded

processData：默認(rèn)會(huì)把data的數(shù)據(jù)轉(zhuǎn)為字符串

cache：設(shè)置為 false 將不緩存此頁面

這里如果是跨域傳輸?shù)脑挄?huì)出現(xiàn)問題，傳文件時(shí)是不能設(shè)置dataType:"jsonp"的，會(huì)出現(xiàn)問題，想要跨域的話盡量不要使用這個(gè)方法（是我比較菜還不會(huì)傳，手動(dòng)捂臉，歡迎指導(dǎo)），當(dāng)然通過后臺(tái)設(shè)置允許訪問的地址也可以

FormData對(duì)象是封閉的，沒有辦法通過console.log(form)打印到打印臺(tái)，想要查看form對(duì)象里的值可以通過瀏覽器調(diào)試工具的Network里查看

?

通常我們傳遞數(shù)據(jù)當(dāng)然不是只傳文件，因此我們需要把要傳的每一條都append到FormData里。

我們可以在html中加一個(gè)form表單并獲取到它的id，然后form表單中的數(shù)據(jù)可以直接綁到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);

這樣會(huì)自動(dòng)獲取到form表單中name和value并添加到formdata對(duì)象里

?

通常我們?cè)趥魅雸D片后，會(huì)想讓圖片在前臺(tái)頁面展示，這里我們要用到H5的FileReader。

我的做法是：前端放一張圖片，點(diǎn)擊圖片的時(shí)候觸發(fā)隱藏的上傳文件的input，input改變時(shí)調(diào)用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){//判斷是否支持FileReaderif (window.FileReader) {var reader = new FileReader();} else {alert("您的設(shè)備不支持圖片預(yù)覽功能，如需該功能請(qǐng)升級(jí)您的設(shè)備！");}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]);} }

這樣就可以顯示圖片的內(nèi)容了

?

轉(zhuǎn)載于:https://www.cnblogs.com/dealblog/p/7760554.html

總結(jié)

以上是生活随笔為你收集整理的移动端通过ajax上传图片（文件）并在前台展示——通过H5的FormData对象的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。