如果在Ajax文件上传中还包含其他类型的表单数据(例如文本输入),则无法使用默认的FormData对象来发送文件以及其他表单数据。也就是说,使用AJAX上传文件时,必须使用其他的表单序列化方法,例如jquery.form.js插件或手动创建FormData对象。
以下是使用jquery.form.js插件的示例代码:
HTML:
JS:
$(document).ready(function(){
// 绑定表单提交事件
$('#upload-form').submit(function(e){
e.preventDefault();
$(this).ajaxSubmit({
url: '/upload', // 上传地址
type: 'POST', // 上传方法
dataType: 'json', // 返回数据格式
success: function(data){
console.log(data);
alert('Upload Success!');
},
error: function(XMLHttpRequest, textStatus, errorThrown){
console.log(XMLHttpRequest);
console.log(textStatus);
console.log(errorThrown);
alert('Upload failed: ' + textStatus);
}
});
});
});
PHP:
'success',
'message' => 'File uploaded successfully.'
);
} else {
$response = array(
'status' => 'error',
'message' => 'File upload failed.'
);
}
header('Content-Type: application/json');
echo json_encode($response);
?>