【发布时间】：2025-12-12 07:25:01
【问题描述】：
您好朋友，我正在尝试使用此表单通过 ajax 上传数据和文件：
<form id="formarea" class="form-horizontal" name="desk">
<input type="text" class="form-control " name="i_txt_2">
<input type="number" class="form-control " name="i_txt_3" required>
<input type="file" name='i_files_1'>
<input type="file" name='i_files_2'>
<input type="file" name='i_files_3'>
</form>
阿贾克斯：
$('[id^="save"]').on("click", function (event, xhr, settings) {
var id = event.target.id;
var name = $("#formarea").attr("name");
$.ajax({
type:"POST",url:"index.php",data:$("#formarea").serialize()+ '&idprocess=' + id + '&idform=' + name,
error: function(xhr,status,error){console.log(error)},
success: function(response) {
$("#areasmg").html(response);
$("#MsgArea").removeClass("").addClass("alert alert-warning alert-dismissable");
$("#MsgArea").show();
}
});
});
问题： 根据要求，我没有收到输入文件的服务器端 php 序列化：i_files_1 如何将 dile 连接到发送的数据：
data:$("#formarea").serialize()+ '&idprocess=' + id + '&idform=' + name + '&Files' + files[]Serialized ,
更新问题已解决：
//If you have button to submit Form
$('[id^="BTN-"]').on("click", function (event, xhr, settings) {
var id = event.target.id; //get id buton to filter if you like get control over the button clicked
var req = 0;
$('#formarea *').filter(':input').each(function(){ //filter all requiered input field
if($(this).val() === "" && $(this).attr('required')){req ++;}
});
if(req == 0){
var name = $("#formarea").attr("name"); //get name of form if you like get control over the form submited
//window.WindowsWait();
var input1 = $("<input>").attr("type", "hidden").attr("name", "idprocess").val(id); //Adding field for more controls if you neet handle from PHP
var input2 = $("<input>").attr("type", "hidden").attr("name", "idform").val(name); //Adding field for more controls if you neet handle from PHP
$('#formarea').append($(input1)); //inserting on Html
$('#formarea').append($(input2)); //inserting on Html
event.preventDefault(); //prevent default submit
//get form an serialize data with FormData
var $form = $("#formarea"),
formData = new FormData(),
params = $form.serializeArray();
var inputs = $("input[type=file]");
//Get all Input tipe Files
$.each(inputs, function (obj, v) {
// Prefix the name of uploaded files with "uploadedFiles-"
// Of course, you can change it to any string
var file = v.files[0];
var name = $(v).attr("name");//you can work with the name
formData.append(name, file);
});
// Add all params to the formData
$.each(params, function(i, val) {
formData.append(val.name, val.value);
});
//performing the submit
$.ajax({
url: $form.attr('action'),
data: formData,
cache: false,
contentType: false,
processData: false,
type: 'POST',
error: function(xhr,status,error){console.log(error)},
success: function(response) {
alert(response);//print response server
}
});
}else{
alert("Error: You must fill all field, there " + req + " Empty Fields.");//handle Error Empty Fields
}
});
测试：
print_r($_FILES);
【问题讨论】：
-
$_FILES 检查文件输入，而 $_POST 处理文本和其他输入类型
-
我有几个问题，但首先，为什么要
$("#formarea").serialize()+ '&idprocess=' + id + '&idform=' + name？使这些参数，您尝试添加，成为实际表单的一部分。 -
另外你需要使用FormData对象来通过AJAX上传文件
-
您好，感谢您的快速响应，如果这些数据是额外的，我需要php端才能正常工作。一些Switch/Case，细节是$("#formarea")。 serialize() 不向我发送输入文件或字段，是一个更新添加了对 $_FILES 的支持
标签： php ajax serialization file-upload