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

IT技术 javascript php jquery ajax form-data
2021-01-17 22:52:37

如何发布文件和输入字符串数据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);
    }
});

服务器.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
    ...
)

是否可以？

6个回答
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()for 中的对象引用.each()以附加到FormData.

发现formdata(fd)不能包含其他信息。即 data:( state:'state', fd: fd )，使用上面的例子，没有数据不会通过ajax传输。我创建了一个单独的 php 文件来接受上传，当 fd (formdata) 自己发送时它工作得很好。
2021-04-06 22:52:37
你将如何获得 php 中的每个值，你能分享一下吗？？
2021-04-11 22:52:37
对于多文件浏览按钮：stackoverflow.com/questions/21060247/...
2021-04-13 22:52:37

好吧，作为更简单和更短的替代方案，您也可以这样做！！ 

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 访问。很好的答案。
2021-04-01 22:52:37
为什么接受的答案有这么多赞成票？这是错误的并且不起作用 - 谢谢你的提示 - 很棒
2021-04-08 22:52:37

我总是用这个。它使用 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)
        {

        }
    });
});

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

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

}
?>

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

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

<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/

其它你可能感兴趣的问题
上一篇在 Internet Explorer 中禁用长时间运行的脚本消息 下一篇HTML5 视频尺寸