所以我有一个表单，我正在使用 jquery 序列化函数通过 ajax 提交表单
serialized = $(Forms).serialize();
$.ajax({
type : "POST",
cache : false,
url : "blah",
data : serialized,
success: function(data) {
}
但是如果表单有一个<input type="file"> 字段怎么办……如何使用这种 ajax 序列化方法将文件传递到表单中……打印 $_FILES 不会输出任何内容
【问题讨论】：
标签： php jquery ajax serialization file-upload
无法使用 AJAX 上传文件，因为您无法访问存储在客户端计算机上的文件内容并使用 javascript 在请求中发送该文件。实现此目的的技术之一是使用隐藏的 iframe。有一个很好的jquery form plugin，它允许你对你的表单进行AJAX化，它也可以supports file uploads。因此，使用此插件，您的代码将如下所示：
$(function() {
$('#ifoftheform').ajaxForm(function(result) {
alert('the form was successfully processed');
});
});
插件会自动处理订阅表单的submit 事件、取消默认提交、序列化值、使用正确的方法和处理文件上传字段，...
【讨论】：
您可以使用 FormData 方法通过 AJAX 上传文件。虽然 IE7、8 和 9 不支持 FormData 功能。
$.ajax({
url: "ajax.php",
type: "POST",
data: new FormData('form'),
contentType: false,
cache: false,
processData:false,
success: function(data) {
$("#response").html(data);
}
});
【讨论】：
使用FormData对象。它适用于任何类型的表单
$(document).on("submit", "form", function(event)
{
event.preventDefault();
$.ajax({
url: $(this).attr("action"),
type: $(this).attr("method"),
dataType: "JSON",
data: new FormData(this),
processData: false,
contentType: false,
success: function (data, status)
{
},
error: function (xhr, desc, err)
{
}
});
});
【讨论】：
processData: false, contentType: false, 是避免Illegal invocation 错误所必需的，因为没有这些，jQuery 将在发送表单数据时尝试将其转换为字符串，这在本文中是不需要的案例。
HTML5 引入了FormData 类，可用于通过ajax 进行文件上传。
FormData 支持从以下桌面浏览器版本开始。 IE 10+、Firefox 4.0+、Chrome 7+、Safari 5+、Opera 12+
【讨论】：
var form = $('#job-request-form')[0];
var formData = new FormData(form);
event.preventDefault();
$.ajax({
url: "/send_resume/", // the endpoint
type: "POST", // http method
processData: false,
contentType: false,
data: formData,
它对我有用！只需将 processData 和 contentType 设置为 False。
【讨论】：
HTML
<form name="my_form" id="my_form" accept-charset="multipart/form-data" onsubmit="return false">
<input id="name" name="name" placeholder="Enter Name" type="text" value="">
<textarea id="detail" name="detail" placeholder="Enter Detail"></textarea>
<select name="gender" id="gender">
<option value="male" selected="selected">Male</option>
<option value="female">Female</option>
</select>
<input type="file" id="my_images" name="my_images" multiple="" accept="image/x-png,image/gif,image/jpeg"/>
</form>
JavaScript
var data = new FormData();
//Form data
var form_data = $('#my_form').serializeArray();
$.each(form_data, function (key, input) {
data.append(input.name, input.value);
});
//File data
var file_data = $('input[name="my_images"]')[0].files;
for (var i = 0; i < file_data.length; i++) {
data.append("my_images[]", file_data[i]);
}
//Custom data
data.append('key', 'value');
$.ajax({
url: "URL",
method: "post",
processData: false,
contentType: false,
data: data,
success: function (data) {
//success
},
error: function (e) {
//error
}
});
PHP
<?php
echo '<pre>';
print_r($_POST);
print_r($_FILES);
echo '</pre>';
die();
?>
【讨论】：
<button type="button" name="button_name" value="Contact Button">Submit</button> 这样的按钮，然后在 php 端得到响应 button_name = "Contact Button"
formData.append("btnName", "true"); 完成了这项工作
data.append('key', 'value');
$(document).on('click', '#submitBtn', function(e){
e.preventDefault();
e.stopImmediatePropagation();
var form = $("#myForm").closest("form");
var formData = new FormData(form[0]);
$.ajax({
type: "POST",
data: formData,
dataType: "json",
url: form.attr('action'),
processData: false,
contentType: false,
success: function(data) {
alert('Sucess! Form data posted with file type of input also!');
}
)};});
通过使用new FormData() 和设置processData: false, contentType:false 在ajax 调用提交表单和文件输入为我工作
使用上面的代码，我也可以通过 Ajax 提交带有文件字段的表单数据
【讨论】：