Ajax的方式進(jìn)行請(qǐng)求:
$.ajax({
url : "http://localhost:8080/STS/rest/user",
type : "POST",
data : $( '#postForm').serialize(),
success : function(data) {
$( '#serverResponse').html(data);
}
});
通常我們提交(使用submit button)時(shí),會(huì)把form中的所有表格元素的name與value組成一個(gè)queryString,提交到后臺(tái)。這用jQuery的方法來(lái)說(shuō),就是serialize。
通過(guò) $( '#postForm' ).serialize() 可以對(duì)form表單進(jìn)行序列化,從而將form表單中的所有參數(shù)傳遞到服務(wù)端。 但是上述方式,只能傳遞一般的參數(shù), 上傳文件的文件流是無(wú)法被序列化并傳遞的。 不過(guò)如今主流瀏覽器都開始支持一個(gè)叫做FormData的對(duì)象,有了這個(gè)FormData,我們就可以輕松地使用Ajax方式進(jìn)行文件 上傳 了
1. 客戶端HTML代碼:
<script src="jquery-3.3.1.js"></script>
<form id='forms'>
<input type="file" name="files" id="files" />
</form>
<script>
$(function($){
$("#files").change(function(){
var url = "files.php";
//方法1:
var file_obj = document.getElementById('files').files[0];
var formData = new FormData();
formData.append('files',file_obj);
/*
方法 2:
var formData = new FormData($("#forms")[0]);
//FormData 可以把post數(shù)據(jù)改成流傳輸。
formData.append("username", "zhuangzi");
*/
/*
方法 3:
得到表單流數(shù)據(jù)對(duì)象
var formData=new FormData($("form")[0]);
需要額外添加數(shù)據(jù):
formData.append("username", "zhuangzi"); */
//向formData里增加數(shù)據(jù)
$.ajax({
url: url,
type: 'POST',
data: formData,
async: false,
cache: false,
contentType: false,
processData: false,
success: function () {
//比如這里的可以把上傳的圖片url及上傳文件名返回,
//然后在這里顯示預(yù)覽功能,并隱藏保存文件名
//方便與其它的表單字段一起上傳
},
error: function () {
}
});
})
})
</script>
這里要注意幾點(diǎn): processData設(shè)置為false。因?yàn)閐ata值是FormData對(duì)象,不需要對(duì)數(shù)據(jù)做處理。
