Javascript 通过JQuery AJAX一起发送FormData和String数据？
如何使用Javascript 通过JQuery AJAX一起发送FormData和String数据？,javascript,php,jquery,ajax,form-data,Javascript,Php,Jquery,Ajax,Form Data,如何使用FormData（）发布文件和输入字符串数据？例如，我有许多其他隐藏的输入数据，我需要将它们发送到服务器 html server.php print_r($_FILES); print_r($_POST); 结果, Array ( [file] => Array ( [name] => xxx.doc [type] => application/msword [tmp_na
FormData（）print_r($_FILES);
print_r($_POST);
Array
(
[file] => Array
(
[name] => xxx.doc
[type] => application/msword
[tmp_name] => C:\wamp\tmp\php7C24.tmp
[error] => 0
[size] => 11776
)
)
Array
(
[file] => Array
(
[name] => xxx.doc
[type] => application/msword
[tmp_name] => C:\wamp\tmp\php7C24.tmp
[error] => 0
[size] => 11776
)
)
Array
(
[page_id] => 1000
[category_id] => 12
[method] => upload
...
)
var fd = new FormData();
var data = []; //<---------------declare array here
var file_data = object.get(0).files[i];
var other_data = $('form').serialize();
data.push(file_data); //<----------------push the data here
data.push(other_data); //<----------------and this data too
fd.append("file", data); //<---------then append this data
var fd=new FormData（）；
var数据=[]//<代码>var fd=新FormData（）；
var file_data=$（'input[type=“file”]）[0]。文件；//对于多个文件
对于（var i=0；i嗯，作为一个更简单、更短的选择，您也可以这样做
var fd = new FormData();
var file_data = object.get(0).files[i];
var other_data = $('form').serialize(); //page_id=&category_id=15&method=upload&required%5Bcategory_id%5D=Category+ID
fd.append("file", file_data);
$.ajax({
url: 'add.php?'+ other_data, //<== just add it to the end of url ***
data: fd,
contentType: false,
processData: false,
type: 'POST',
success: function(data){
alert(data);
}
});
var fd=new FormData（）；
var file_data=object.get（0.files[i]；
var other_data=$（'form'）。serialize（）；//page_id=&category_id=15&method=upload&required%5Bcategory_id%5D=category+id
fd.append（“文件”，文件\数据）；
$.ajax({
url:'add.php？'+其他_数据，//我总是使用它。它使用ajax发送表单数据
$(document).on("submit", "form", function(event)
{
event.preventDefault();
var url=$(this).attr("action");
$.ajax({
url: url,
type: 'POST',
data: new FormData(this),
processData: false,
contentType: false,
success: function (data, status)
{
}
});
});
对于多文件输入：
请尝试以下代码：
<form name="form" id="form" method="post" enctype="multipart/form-data">
<input type="file" name="file[]">
<input type="file" name="file[]" >
<input type="text" name="name" id="name">
<input type="text" name="name1" id="name1">
<input type="button" name="submit" value="upload" id="upload">
</form>
$('#upload').on('click', function() {
var fd = new FormData();
var c=0;
var file_data;
$('input[type="file"]').each(function(){
file_data = $('input[type="file"]')[c].files; // for multiple files
for(var i = 0;i<file_data.length;i++){
fd.append("file_"+c, file_data[i]);
}
c++;
});
var other_data = $('form').serializeArray();
$.each(other_data,function(key,input){
fd.append(input.name,input.value);
});
$.ajax({
url: 'work.php',
data: fd,
contentType: false,
processData: false,
type: 'POST',
success: function(data){
console.log(data);
}
});
});
$（'#upload'）。在（'单击'，函数（）上）{
var fd=新FormData（）；
var c=0；
var文件；
$（'input[type=“file”]”）。每个（函数（）{
file_data=$（'input[type=“file”]'）[c].files；//用于多个文件
对于（var i=0；i，我尝试与我的朋友进行代码协作。来自此论坛的修改
$('#upload').on('click', function() {
var fd = new FormData();
var c=0;
var file_data,arr;
$('input[type="file"]').each(function(){
file_data = $('input[type="file"]')[c].files; // get multiple files from input file
console.log(file_data);
for(var i = 0;i<file_data.length;i++){
fd.append('arr[]', file_data[i]); // we can put more than 1 image file
}
c++;
});
$.ajax({
url: 'test.php',
data: fd,
contentType: false,
processData: false,
type: 'POST',
success: function(data){
console.log(data);
}
});
});
$（'#上传'）。在（'click'，function（）上{
var fd=新FormData（）；
var c=0；
var文件_数据，arr；
$（'input[type=“file”]”）。每个（函数（）{
file_data=$（'input[type=“file”]'）[c].files；//从输入文件获取多个文件
console.log（文件\u数据）；
对于（var i=0；i
我希望有同样问题的人，能尽快解决这个问题。
由于多次上传图像，我感到头疼。据我所知，您希望将图像和输入值一起发送。此代码对我很有效，我希望它对将来的人有所帮助
<form id="my-form" method="post" enctype="multipart/form-data">
<input type="file" name="file[]" multiple="" />
<input type="hidden" name="page_id" value="<?php echo $page_id;?>"/>
<input type="hidden" name="category_id" value="<?php echo $item_category->category_id;?>"/>
<input type="hidden" name="method" value="upload"/>
<input type="hidden" name="required[category_id]" value="Category ID"/>
</form>
看一看我的ajax多重上传预览短代码
我发现，如果以某种方式（比如你的ModelState在服务器上为false）将页面再次发布到服务器，那么它将旧的值带到服务器上。因此我找到了解决方案
var data = new FormData();
$.each($form.serializeArray(), function (key, input) {
if (data.has(input.name)) {
data.set(input.name, input.value);
} else {
data.append(input.name, input.value);
}
});
对于ajax中的多个文件，请尝试以下方法
var url = "your_url";
var data = $('#form').serialize();
var form_data = new FormData();
//get the length of file inputs
var length = $('input[type="file"]').length;
for(var i = 0;i<length;i++){
file_data = $('input[type="file"]')[i].files;
form_data.append("file_"+i, file_data[0]);
}
// for other data
form_data.append("data",data);
$.ajax({
url: url,
type: "POST",
data: form_data,
cache: false,
contentType: false, //important
processData: false, //important
success: function (data) {
//do something
}
})
var url=“您的url”；
var data=$（'#form'）.serialize（）；
var form_data=new FormData（）；
//获取文件输入的长度
var length=$（'input[type=“file”]”）。length；
对于（var i=0；ivar fd=new FormData（）；
//获取表单值
var other_data=$（'#form1'）.serializeArray（）；
$。每个（其他）数据、功能（键、输入）{
fd.append（input.name，input.value）；
});
//获取文件值
var$file=jq（“#photoUpload”）.get（0）；
如果（$file.files.length>0）{
对于（变量i=0；i<$file.files.length；i++）{
fd.append（'photo'+i，$file.files[i]）；
}
}
$.ajax({
url:'test.php'，
数据：fd，
contentType:false，
processData:false，
键入：“POST”，
成功：功能（数据）{
控制台日志（数据）；
}
});
谢谢，但我明白了，数组（）数组（[file]=>[object file]，page\u id=&category\u id=15&system\u id=53&method=upload&required%5bcegority\u id%5D=category+id）
您如何在php中获得每个值，您可以共享吗？对于多个文件浏览按钮：发现formdata（fd）不能与其他信息一起包含。例如，数据：（state:'state'，fd:fd），使用上述示例，没有数据不会通过ajax传输。我创建了一个单独的php文件来接受上载，当fd（formdata）时，它工作得非常好是由自身发送的。请注意，其他_数据可以通过$_GET访问。答案很好。为什么接受的答案有这么多的投票？它是错误的，不起作用-感谢您的提示-它是错误的great@ng-rahul：创建'work.php'文件并放入代码：print\r（$\u POST）；print\r（$\u文件）；现在很抱歉。但很快我也会用javascript更新它。
<?php
$count = count($_FILES['arr']['name']); // arr from fd.append('arr[]')
var_dump($count);
echo $count;
var_dump($_FILES['arr']);
if ( $count == 0 ) {
echo 'Error: ' . $_FILES['arr']['error'][0] . '<br>';
}
else {
$i = 0;
for ($i = 0; $i < $count; $i++) {
move_uploaded_file($_FILES['arr']['tmp_name'][$i], 'uploads/' . $_FILES['arr']['name'][$i]);
}
}
?>
<form id="my-form" method="post" enctype="multipart/form-data">
<input type="file" name="file[]" multiple="" />
<input type="hidden" name="page_id" value="<?php echo $page_id;?>"/>
<input type="hidden" name="category_id" value="<?php echo $item_category->category_id;?>"/>
<input type="hidden" name="method" value="upload"/>
<input type="hidden" name="required[category_id]" value="Category ID"/>
</form>
jQuery.ajax({
url: 'post.php',
data: new FormData($('#my-form')[0]),
cache: false,
contentType: false,
processData: false,
type: 'POST',
success: function(data){
console.log(data);
}});
var data = new FormData();
$.each($form.serializeArray(), function (key, input) {
if (data.has(input.name)) {
data.set(input.name, input.value);
} else {
data.append(input.name, input.value);
}
});
var url = "your_url";
var data = $('#form').serialize();
var form_data = new FormData();
//get the length of file inputs
var length = $('input[type="file"]').length;
for(var i = 0;i<length;i++){
file_data = $('input[type="file"]')[i].files;
form_data.append("file_"+i, file_data[0]);
}
// for other data
form_data.append("data",data);
$.ajax({
url: url,
type: "POST",
data: form_data,
cache: false,
contentType: false, //important
processData: false, //important
success: function (data) {
//do something
}
})
parse_str($_POST['data'], $_POST);
for($i=0;$i<count($_FILES);$i++){
if(isset($_FILES['file_'.$i])){
$file = $_FILES['file_'.$i];
$file_name = $file['name'];
$file_type = $file ['type'];
$file_size = $file ['size'];
$file_path = $file ['tmp_name'];
}
}
var fd = new FormData();
//Get Form Values
var other_data = $('#form1').serializeArray();
$.each(other_data, function (key, input) {
fd.append(input.name, input.value);
});
//Get File Value
var $file = jq("#photoUpload").get(0);
if ($file.files.length > 0) {
for (var i = 0; i < $file.files.length; i++) {
fd.append('Photograph' + i, $file.files[i]);
}
}
$.ajax({
url: 'test.php',
data: fd,
contentType: false,
processData: false,
type: 'POST',
success: function(data){
console.log(data);
}
});