使用HTML5的formData对象 用ajax异步的方式提交form表单(还可以实现异步提交文件),可参考博客:
- https://www.cnblogs.com/zhuxiaojie/p/4783939.html
- https://developer.mozilla.org/zh-CN/docs/Web/API/FormData/Using_FormData_Objects
这里要注意几点:
<form>
标签添加enctype="multipart/form-data"
属性- jQuery 的 ajax 中
processData
设置为false
(表示不需要对数据做处理) - jQuery 的 ajax 中
cache
设置为false
(表示上传文件不需要缓存) - jQuery 的 ajax 中
contentType
设置为false
(因为前面已经声明了是‘FormData对象’)
如果没有<form>
标签,也没有enctype="multipart/form-data"
属性,怎么使用formData对象提交表单呢?如下方式:
var formData = new FormData();
formData.append('name', $('#name').val());
formData.append('file', $('#file')[0].files[0]);
$.ajax({
url: '',
type: 'POST',
data: formData,
cache: false,
processData: false,
contentType: false
}).done(function(res) {
}).fail(function(res) {});
注意:要想让<input type="file">
标签 能够上传多个文件,只需要在<input type="file">
里添加multiple
或multiple="multiple"
属性。
php文件:(示例)
<?php
$name = isset($_POST['name'])? $_POST['name'] : '';
$gender = isset($_POST['gender'])? $_POST['gender'] : '';
$filename = time().substr($_FILES['photo']['name'], strrpos($_FILES['photo']['name'],'.'));
$response = array();
if(move_uploaded_file($_FILES['photo']['tmp_name'], $filename)){
$response['isSuccess'] = true;
$response['name'] = $name;
$response['gender'] = $gender;
$response['photo'] = $filename;
}else{
$response['isSuccess'] = false;
}
echo json_encode($response);
?>