通過傳統的 form 表單提交的方式上傳文件
<form id="uploadForm" action="" method="post" enctype="multipart/form-data">
<p>上傳文件:<input type ="file" name="file"/></p>
<input type="submit" value="上傳"/>
</form>
不過傳統的 form 表單提交會導致頁面刷新,但是在有些情況下,我們不希望頁面被刷新,這種時候我們都是使用 Ajax 的方式進行請求的。
使用 serialize() 對 form 表單進行序列化提交
$.ajax({
url: "",
type: "POST",
data: $('#uploadForm').serialize(),
success: function(data) {
},
error: function(data) {
}
});
如上,通過$('#uploadForm').serialize()可以對 form 表單進行序列化,從而將 form 表單中的所有參數傳遞到服務端。
但是上述方式,只能傳遞一般的參數,上傳文件的文件流是無法被序列化並傳遞的。不過如今主流瀏覽器都開始支持一個叫做 FormData 的對象,有了這個對象就可以輕鬆地使用 Ajax 方式進行文件上傳了。
使用 FormData 進行 Ajax 請求並上傳文件
<form id="uploadForm">
<p>上傳文件:<input type="file" name="file" /></p>
<input type="button" value="上傳" onclick="upload()" />
</form>
function upload() {
var formData = new FormData($("#uploadForm")[0]);
$.ajax({
url: '',
type: 'POST',
data: formData,
async: false,
cache: false,
contentType: false,
processData: false,
success: function(data) {
},
error: function(data) {
}
});
}
基本Ok,沒有什麼問題了,記得一定需要[0],不然拿不到文件名
---------------------
作者:huxiangen
來源:CSDN
原文:https://blog.csdn.net/huxiangen/article/details/84970394
版權聲明:本文爲博主原創文章,轉載請附上博文鏈接!