前些時候遇到移動端需要上傳圖片和視頻的問題，之前一直通過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, // 注意這里應設為falseprocessData: false, //falsecache: 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){//判斷是否支持FileReaderif (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]);} }

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

?

轉載于:https://www.cnblogs.com/dealblog/p/7760554.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。