Question

我有一个用于发送邮件的表单。它包含 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]按钮单击。

Answer 1

编辑：我上面的初步评论是正确的。除了将表单对象传递给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>

Answer 2

指定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
})

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

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

3 个答案: