How do I post form data without submitting the form with jQuery?

Question

I am trying to create a file upload feature for my account management page. I would like to be able to upload a file without submitting the form. I am using a server-side upload script with CodeIgniter. Every time I run my script, the file input field is empty. How do I send the form data of one specific input to my ajax file?

<img src=".../attachments/f8725841986a40061b0f4da9f7ee45dd.png" width="100" height="100" border="0" alt="Avatar Not Available" src="..." id="avatar_response"/>
<input type="file" name="avatar" size="30"><a href="javascript:void(0);" rel="submitFile" data-input-name="avatar">Save</a>


$(document).on('click', '[rel="submitFile"]', function(){

    console.log('anchor clicked');

    var $anchor = $(this);
    var input_name = $anchor.data('input-name');
    var file_input = $('#'+input_name+'_file');
    console.log(file_input);

    var postdata = new FormData();

    var files = file_input.files;
    console.log(files);

    postdata.append(input_name, files[0]);

    $.ajax({
        type: "POST",
        url: "http://basecommand/index.php/ajax/upload/avatar/"+input_name,
        dataType: "xml",
        contentType: false,
        processData: false,
        statusCode: {
            404: function(){
                console.log("The file was not found.");
            }
        },
        error: function(jqXHR, textStatus){
            console.log("AJAX Error: "+textStatus);
        },
        success: function(xml)
        {
            console.log("ajax successful");
            $(xml).find("upload").each(function(){
                var fileurl = $(this).find("fileurl").text();
                var response = $(this).find("response").text();
                console.log(fileurl);
                console.log(response);
            })
        }
    });

});

Get rid of `href="javascript:void(0);"` and add `return false;` at the end of the click function after the `ajax` code. The `file` can be sent through ajax but must be created inside of HTML5's `FormData` object. Here's [an answer on SO](http://stackoverflow.com/questions/5392344/sending-multipart-formdata-with-jquery-ajax) addressing this very subject. — Ohgodwhy, Sep 09 '14 at 03:32
you need to prevent the default action of the button click(which might be submitting the form). So either return false from the click handler or call `event.preventDefault()` where `event` is the first param to the click handler — Arun P Johny, Sep 09 '14 at 03:33
@ Ohgodwhy, I keep getting an error "Illegal return statement" if i change void(0) to return false. And I also tried the FormData object, but I keep getting an error saying "Cannot read property '0' of undefined ". I have updated my code. — ShoeLace1291, Sep 09 '14 at 04:09

score 2 · Accepted Answer · edited May 06 '16 at 18:05

Try this:

var postdata = new FormData();
if (formId == "imageForm") {
    var filesList = document.getElementById('imgFile');
    for (var i = 0; i < filesList.files.length; i++) {
        postdata.append('file', filesList.files[i]);
    }
}

You can add other parameters like this:

formdata = $("#" + formId + "").serialize() + "&ProductId=" + productId + "&Sku=" + sku + "&IsVideo=" + isVideo;

How do I post form data without submitting the form with jQuery?

1 Answers1