Jquery ajax上传多文件,并附带字段
通过formdata对象就可以简单实现。
<form name="form1" enctype="multipart/form-data" <!--注意设置类型 --> method="post">
<div>
<input name="name" value="小明">
</div>
<div>
<input name="age" value="25">
</div>
<div>
<input type="file" name="file1">
</div>
<div>
<input type="file" name="file2">
</div>
</form>
<div>
<button onclick="submit1()">提交</button>
</div>
<script src="/static/js/jquery/jquery-with-migrate.min.js"></script>
<script>
function submit1() {
let formdata = new FormData($("[name='form1']")[0]);//初始化formdata对象
/* for (var [a, b] of formdata.entries()) {
console.log(a, b);
}*/
$.ajax({
url: 'test1.php',
type: 'POST',
cache: false,//不缓存
data: formdata,
processData: false,//上传文件不处理数据
contentType: false,//表单已指定
dataType:"json"
}).done(function (res) {
if (res.sts) {
console.log(res);
alert(res.msg);
// $("[name='form1']")[0].reset();
} else {
alert(res.msg);
}
}).fail(function (res) {
alert("添加失败");
});
}
</script>
后端php的话通过$_POST与$_FILES就可拿到对应字段与文件。
formdata对象不一定通过表单元素初始化,可以自定义。
不止jquery,原生的,axios亦可以,主要header头一定要form-data。