1. 程式人生 > >jq傳送圖片或者檔案至後臺

jq傳送圖片或者檔案至後臺

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)
            }
        });

})

相當於進行了表單提交,後臺開發人員接收到資料操作即可。