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 .

Rory McCrossan · Accepted Answer · 2016-07-14 08:36:04Z

5

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

answered Jul 14, 2016 at 8:36

Rory McCrossan

338k41 gold badges321 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

vciloglu Over a year ago

ty very much . new FormData(this); I did not think about it. omg

Rory McCrossan Over a year ago

No problem, glad to help. For your reference, here's the FormData entry at MDN

Prashant Agarwal Over a year ago

@RoryMcCrossan, this creates form's name-value pair using elements' name attribute. I am using ASP.NET which messes up elements' name for server side controls. Therefore, I use elements' IDs to construct name-value pairs using a serialize function (looping thru all form controls by id). Is there a way I can serialize for text controls and append file data to the formdata? I am OK to do it manually as OP was trying to do. Thanks in advance!

Collectives™ on Stack Overflow

jquery ajax post file , multiple files and text input

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related