jqueryFormData上傳文件
- 2019 年 12 月 18 日
- 筆記
文件表單html程式碼如下:
<form id="form" action="" method="POST" enctype="multipart/form-data" onsubmit="return formSubmit();">
<input type="file" id="file" name="file[]" multiple="multiple">
<input type="submit" value="提交">
</form>
//表單提交
function formSubmit(){
var formElement = document.querySelector("form");
var formData = new FormData(formElement);
//如果需要追加其他欄位
formData.append("fields","value");
//使用jq ajax提交表單
$.ajax({
url:url,
type:"POST",
data:formData,
cache: false, // 不快取
processData: false, // jQuery不要去處理髮送的數據
contentType: false, // jQuery不要去設置Content-Type請求頭
success:function(data){
console.log(data);
}
});
}
//文件提交
$("input[name='file[]']").change(function(){
// var formElement = document.getElementByIdx_x("file").files;
// 或者
var formElement = $(this)[0].files;
var formData = new FormData();
for(var i = 0; i < formElement.length ;i++){
formData.append("image[]",formElement[i]);
}
$.ajax({
url:url,
type:"POST",
data:formData,
cache: false, // 不快取
processData: false, // jQuery不要去處理髮送的數據
contentType: false, // jQuery不要去設置Content-Type請求頭
success:function(data){
console.log(data);
}
});
});
服務端接收數據:
服務端如果php 則可以使用$_FILES獲取文件數據。
