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 http://stackoverflow.com/questions/2320069/jquery-ajax-file-upload — andrew, Mar 31 '14 at 20:12
@andrew yes it can be done, that link is very old. see answer below. — A.O., Mar 31 '14 at 20:18
Similar http://stackoverflow.com/questions/18519771/no-data-received-from-files — Musa, Mar 31 '14 at 20:23

A.O. · Accepted Answer · 2014-03-31T20:19:27.550

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 '14 at 20:19

answered Mar 31 '14 at 20:14

A.O.

3,733
6
30
49

Thank you, the plugin sounds promising I will look into it. – Malcolm Mar 31 '14 at 20:24
It may be worth noting that the plugin falls back to using an iframe when xhr2 is not available in older browsers https://github.com/malsup/form/ – andrew Mar 31 '14 at 20:29
Thanks andrew, I was hoping to stay clear of iframes, but if it only falls back on older browsers that I can deal with :) – Malcolm Mar 31 '14 at 20:46

Post multipart/form-data using Ajax

1 Answers1