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获取文件数据。
