通过 JQuery AJAX 一起发送 FormData 和 String 数据？

Posted 2023-02-24

【中文标题】通过 JQuery AJAX 一起发送 FormData 和 String 数据？

【英文标题】：Send FormData and String Data Together Through JQuery AJAX?

【发布时间】：2014-01-30 08:47:48

【问题描述】：

如何使用FormData() 发布文件和输入字符串数据？例如，我有许多其他隐藏的输入数据需要将它们发送到服务器，

html,

<form action="image.php" 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，

// HTML5 form data object.
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',
    data: fd,
    contentType: false,
    processData: false,
    type: 'POST',
    success: function(data)
        alert(data);
    
);

server.php

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
    ...
)

有可能吗？

【参考方案1】：

你可以试试这个：

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

【讨论】：

谢谢，但我明白了，Array ( ) Array ( [file] => [object File],page_id=&category_id=15&system_id=53&method=upload&required%5Bcategory_id%5D=Category+ID )

【参考方案2】：

var fd = new FormData();
var file_data = $('input[type="file"]')[0].files; // for multiple files
for(var i = 0;i<file_data.length;i++)
    fd.append("file_"+i, file_data[i]);

var other_data = $('form').serializeArray();
$.each(other_data,function(key,input)
    fd.append(input.name,input.value);
);
$.ajax(
    url: 'test.php',
    data: fd,
    contentType: false,
    processData: false,
    type: 'POST',
    success: function(data)
        console.log(data);
    
);

添加了一个for 循环并将.serialize() 更改为.serializeArray()，以便将.each() 中的对象引用附加到FormData。

【讨论】：

你如何获得php中的每个值你能分享一下吗？？

多文件浏览按钮：***.com/questions/21060247/…

发现formdata(fd)不能和其他信息一起包含。即 data:( state:'state', fd: fd )，使用上面的例子，没有数据不会通过 ajax 传输。我创建了一个单独的 php 文件来接受上传，当 fd (formdata) 自己发送时效果很好。

【参考方案3】：

好吧，作为一种更简单且更短的替代方法，您也可以这样做！

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);
    
);

【讨论】：

请注意，other_data 可以通过 $_GET 访问。很好的答案。

为什么接受的答案有这么多赞成？这是错误的并且不起作用 - 谢谢你的提示 - 很棒

【参考方案4】：

我一直用这个。它使用 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)
        

        
    );
);

【参考方案5】：

对于多文件输入： 试试这个代码：

 <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);
         
     );
 );

【讨论】：

@ng-rahul : 创建 'work.php' 文件并输入代码： print_r($_POST); print_r($_FILES);

对不起。但很快我也会用 javascript 更新它。

【参考方案6】：

我尝试与朋友一起贡献我的代码协作。来自这个论坛的修改。

$('#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);
                   
               );
           );

这是我的 html 文件

<form name="form" id="form" method="post" enctype="multipart/form-data">
<input type="file" name="file[]"multiple>
<input type="button" name="submit" value="upload" id="upload">

这个php代码文件

<?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]);
    


?>

我希望有同样问题的人，可以快速解决这个问题。 我很头疼，因为多次上传图片。

【参考方案7】：

据我了解，您希望将图像和输入值一起发送。这段代码对我很有效，我希望它对将来的人有所帮助。

<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);
);

看看我的 ajax 多次上传和预览的简短代码。

https://santanamic.github.io/ajax-multiple-upload/

【参考方案8】：

我发现，如果以某种方式（比如您的 ModelState 在服务器上为假）并且页面再次发布到服务器，那么它会将旧值带到服务器。所以我找到了解决方案。

   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);
        
    );

【参考方案9】：

对于 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
                
        )

在php中

        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'];
              
        

【参考方案10】：

 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);
    
);