jq傳送圖片或者檔案至後臺
阿新 • • 發佈:2018-11-21
XMLHttpRequest Level2 添加了一個新的介面——FormData 。【 主要用於傳送表單資料,但也可以獨立使用於傳輸鍵控資料。與普通的Ajax相比,它能非同步上傳二進位制檔案 】
利用FormData物件,可通過js用一些鍵值對來模擬一系列表單控制元件,還可以使用XMLHttpRequest的send()方法非同步提交表單。
首先,在之前的“前後臺互動之傳參方式”中講了傳統的form表單提交的方式(表單序列化),它只適用於傳遞一般引數,上傳檔案的檔案流是無法被序列化並傳遞的。所以,使用FormData,可以輕鬆的和ajax結合進行檔案上傳。
html
<form action="" method="post" id="uploadF">
<div>上傳檔案:</div><input name="file" type="file" id="uploadFile" value="" />
</form>
js
$('#uploadFile').change(function() { var form = document.getElementById("uploadF"); var formData = new FormData(form); formData.append('testName', '我是傳送檔案標識') console.log(formData.get('file')); $('#loading').show(); $.ajax({ type: "post", url: domain + ads.uploadads, data: formData, processData: false,//告訴jq不要處理髮送的資料 contentType: false,//告訴jq不要設定content-Type請求頭 success: function(res) { console.log(res) } }); })
相當於進行了表單提交,後臺開發人員接收到資料操作即可。