jquery ajax post file , multiple files and text input

Question

hello guys my html code :

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

as you see a single file, multiple files, and I have one text value. This value 'ajax' with want to send at a time. 'JQuery' I use.

I can not run in any way

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

I looked at other similar solutions, but it did not fix my problem and sory my bad english .

Answer 1

You don't need to do this manually; if you just provide the form as a DOMElement to the FormData constructor then all the form values will be automatically included for you.

Also note that you should hook to the submit event of the form, not the click event of the submit button. You should also remove the use of async: false as it is incredibly bad practice to use.

With all that said, try this:

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