将表单输入附加到 Formdata 对象不起作用答案

【问题标题】：Appending form inputs to Formdata Object not working将表单输入附加到 Formdata 对象不起作用
【发布时间】：2016-09-30 16:42:01
【问题描述】：

我有一个用于发送邮件的表单。它包含诸如 to_name,subject,message and attachment button 之类的字段。我将在单击类为 .file_add_btn 的按钮时创建一个文件输入字段。

//click event for add files
$(".file_add_btn").click(function(){
    if($("#file_div").html() == '')
    {
       $("#file_div").append('<div class="file_btn_div" id="file_btn_div_first"><input type="file" class="btn_browse" name="file_uploads[]">'+
       '<input type="button" class="del_file" value="X"></div>'); 
    }
    else
    {
        if($(document).find('.btn_browse:last').get(0).files.length !==0)
        {
            $("#file_div").append('<div class="file_btn_div"><input type="file" class="btn_browse" name="file_uploads[]">'+
            '<input type="button" class="del_file" value="X"></div>');
        }
    }

});

我编写了以下函数来将文件输入包含到 formData 中。

$.fn.serializefiles = function() {
    var obj = $(this);

    var form_data = new FormData(this[0]);
    $.each($(obj).find('.btn_browse'), function(i, tag) {
        $.each(tag.files, function(i, file) {
             console.log(tag.name+' '+file.name)//this is printing in console
                form_data.append(tag.name, file);
        });
    });
    var params = $(obj).serializeArray();
    $.each(params, function (i, val) {
            console.log(val.name+'<br/>');
            console.log(val.value+'<br/>');
            **//here file names are not coming.All other elements are coming.They are not adding to form_data object**
            form_data.append(val.name, val.value);
    });
    return form_data;
};

我的 ajax 调用如下：

$.ajax({
    type: "POST", 
    url: 'process.php',
    data: $("#compose_message").serializefiles() ,//formID=#compose_message
    asyn: true,
    cache: false,
    processData: false,
    contentType: false,
    success:function()
          ....

我无法将输入附加到 form_data 对象中。在控制台中，我在按钮点击后的 POST 中看到 [object FormData]。

【问题讨论】：

我很困惑为什么你需要这个serializefiles函数，而你应该能够简单地做data: new FormData($("#compose_message")[0])？
如果我们做data: new FormData($("#compose_message")[0])，我如何附加多个文件输入和其他formdatas@Mikey
@Mikey 我用过console.log(JSON.stringify(new FormData($("#compose_message")[0])));，这在控制台中给了我空值{}。

标签： php jquery ajax forms file

【解决方案1】：

为 formdata 指定准确的数据

var formData = new FormData();
formData.append('section', 'general');
formData.append('action', 'previewImg');
// Main magic with files here
formData.append('image', $('input[type=file]')[0].files[0]);

使用 jquery 的 Ajax 请求将如下所示：

$.ajax({
    url: 'Your url here',
    data: formData,
    // THIS MUST BE DONE FOR FILE UPLOADING
    contentType: false,
    processData: false,
    // ... Other options like success and etc
})

【讨论】：

我是否需要单独附加每个表单元素。我在我的函数中做同样的事情
我使用formData.append('section', 'general'); 进行测试。然后console.log(JSON.stringify(new FormData($("#compose_message")[0]))); 也给了我{} 字符串。我认为formData 没有附加值

【解决方案2】：

编辑：我上面最初的评论是正确的。除了将表单对象传递给FormData 构造函数之外，您不需要做任何花哨的事情，如下面的示例所示。

console.log(JSON.stringify(formData)); 永远不会显示FormData 的值。但是，如果您查看浏览器的网络选项卡，发送的请求将显示正在传递的值。

如果你想在数据被传递之前检查它，你可以使用这个answer。

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-2.1.4.js"></script>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
    <style>
        input {
            float: left;
            clear: left;
        }
    </style>
</head>
<body>
    <form method="post" enctype="multipart/form-data">
        <input type="text" name="text" value="text">
        <input type="hidden" name="hidden" value="hidden">
        <input type="file" name="file_uploads[]" value="">
        <input type="file" name="file_uploads[]" value="">
        <input type="file" name="file_uploads[]" value="">
        <input type="button" value="Add">
        <input type="submit" value="Submit">
    </form>
    <script>
    $(function () {
        $('form').on('submit', function (e) {
            e.preventDefault();
            var formData = new FormData(this);
            console.log(JSON.stringify(formData)); // will always be {}

            $.ajax({ url: '404', type: 'post', data: formData, processData: false, contentType: false });
        });

        $('[type=button]').on('click', function () {
            $(this).before('<input type="file" name="file_uploads[]" value="">');
        });
    });
    </script>
</body>
</html>

【讨论】：

我在复制你的代码后使用console.log(JSON.stringify(formData));检查了结果，但它给了我{}。我的兄弟可能是什么原因
那是因为你不能那样打印FormData的内容。我用一个简单的例子编辑了我的答案并在本地进行了测试。
我用过这个代码，但在我的process.php，它给了我Uncaught exception 'RuntimeException' with message 'Invalid parameters.，因为我用过if ( !isset($_FILES['file_uploads']['error']) || is_array($_FILES['file_uploads']['error']) ) { throw new RuntimeException('Invalid parameters.'); }
如果您检查$_FILES 数组，使用print_r，它应该类似于this，其中每个值都是一个数组。当您使用这种提交文件的 AJAX 方法时，我认为总会有数组。您需要遍历每个文件并进行必要的检查（至少使用is_uploaded_file()）。
$_FILES 对我来说是空数组：(

【解决方案3】：

试试这个

  var form = $("form")[0]; // You need to use standard javascript object here
    var formData = new FormData(form);
    formData.append('section', 'general');
    formData.append('action', 'previewImg');
    // Main magic with files here
    formData.append('image', $('input[type=file]')[0].files[0]);

【讨论】：