Post multipart/form-data using Ajax

Question

For some reason I can not get the following script to work correctly, when submitting the form without using the script all works as it should, but when using the script to submit the form I only get the category and description in the post variables but no file. So my question is how do I get the script to post the file variable also.

Ajax

$("#img-post").click(function()
{
    $("#imgupload").submit(function(e)
    {
        var postData = $(this).serializeArray();
        var formURL = $(this).attr("action");
        $.ajax(
        {
            url : formURL,
            type: "POST",
            data : postData,
            success:function(data, textStatus, jqXHR) 
            {
                $("#img").html('<pre><code class="prettyprint">'+data+'</code></pre>');

            },
            error: function(jqXHR, textStatus, errorThrown) 
            {
                alert('Error');
                document.getElementById('enquiry').style.visibility = 'hidden';
            }
        });
        e.preventDefault(); //STOP default action
    });

    $("#imgupload").submit(); //SUBMIT FORM
});

HTML

<div class="img" id="img"></div>

<form name="imgupload" id="imgupload" action="upload.php" method="post" enctype="multipart/form-data">
<input name="category" id="category" type="text" />
<input name="file" id="file" type="file" />
<textarea name="discription" id="discription" cols="68%" rows="8"></textarea><br>
<input type="button"  id="img-post" name="img-post" value="Add" />
</form>

can't be done. see here stackoverflow.com/questions/2320069/jquery-ajax-file-upload — andrew
– andrew, Commented Mar 31, 2014 at 20:12
@andrew yes it can be done, that link is very old. see answer below. — A.O.
– A.O., Commented Mar 31, 2014 at 20:18

A.O. · Accepted Answer · 2014-03-31 20:19:27Z

3

Data from file select elements is not serialized

Taken from the docs page at:

https://api.jquery.com/serializeArray/

However, you can achieve this with the jquery ajax form plugin found here:

http://malsup.com/jquery/form/

This plugin is nice because not only does it capture the form data (including files) you can easily send extra $_POST data in the data attribute of the ajax call along with your form.

edited Mar 31, 2014 at 20:19

answered Mar 31, 2014 at 20:14

A.O.

3,7636 gold badges32 silver badges49 bronze badges

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

3 Comments

Malcolm Over a year ago

Thank you, the plugin sounds promising I will look into it.

andrew Over a year ago

It may be worth noting that the plugin falls back to using an iframe when xhr2 is not available in older browsers github.com/malsup/form

Malcolm Over a year ago

Thanks andrew, I was hoping to stay clear of iframes, but if it only falls back on older browsers that I can deal with :)

Collectives™ on Stack Overflow

Post multipart/form-data using Ajax

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related