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

时间:2016-07-14 08:29:53

标签: jquery ajax file text send

你好我的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>

当你看到一个文件,多个文件,我有一个文本值。这个值&#39; ajax&#39;想要一次发送。 &#39; JQuery的&#39;我用。

我无法以任何方式运行

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

我看了其他类似的解决方案,但它没有解决我的问题 并且我的英语不好。

1 个答案:

答案 0 :(得分:5)

您无需手动执行此操作;如果您只是将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);
        }
    })
})