jquery ajax post文件，多个文件和文本输入

Question

你好，我的HTML代码：

<form action="post.php" enctype="multipart/form-data" method="post">
   <input type="text" name="name" id=""><br>
   <input type="file" name="poster" id="poster"><br>
   <input type="file" name="scene[]" id="scene" multiple><br>
   <input type="submit" value="POST">
</form>

正如你看到一个文件，多个文件，我有一个文本值。这个值'ajax'想要一次发送。我使用的"JQuery"。

我不能以任何方式运行

$(function(){
        $('input[type="submit"]').click(function(e){
            e.preventDefault();
            var file_data = $('#poster').prop('files')[0];
            var form = $('form').serialize();
            var form_data = new FormData();
            $.each($('input[name="scene[]"]'),function(i, obj) {
                $.each(obj.files,function(j,file){
                    form_data.append('photo['+i+']', file);
                    })
                });
            form_data.append(form);
            form_data.append('file',file_data);
            alert(form_data);
            $.ajax({
                url:'post.php',
                cache:false,
                contentType:false,
                processData:false,
                async:false,
                data:form_data,
                type:'post',
                success:function(answ){
                    $('#result').html(answ);
                }
            })
        })
    })

我

查看了其他类似的解决方案，但它没有解决我的问题并说我的英语不好.

Answer 1

您不需要手动执行此操作;如果您只是将form作为 DOMElement 提供给 FormData 构造函数，则所有表单值将自动包含给您。

另请注意，您应该挂钩到表单的submit事件，而不是提交按钮的click事件。您还应该删除async: false的使用，因为使用起来是非常糟糕的做法。

综上所述，请尝试以下操作：

$('form').submit(function(e){
    e.preventDefault();
    var form_data = new FormData(this); 
    $.ajax({
        type: 'post',
        url: 'post.php',
        data: form_data,
        cache: false,
        contentType: false,
        processData: false,
        success: function(answ){
            $('#result').html(answ);
        }
    })
})