HTML file upload with jQuery/Ajax not working

Question

I'm trying to incorporate some code from Stack user DannYo's comment here, however my version of his code doesn't seem to run. The error and the "beforesend" functions return each time.

HTML

<form action="" method="post" enctype="multipart/form-data">
    <input type="file" id="file">
    <input type="email" id="sender" name="sender" required>
    <input type="email" id="receiver" name="receiver" required>
    <input type="text" id="message" name="message">
    <button id="send" class="button">Send it</button>
</form>

JavaScript

$("form").on("submit", function() {

    var formData = new FormData($('form')[0]);

    $.ajax({
        url: 'upload.php',  //server script to process data
        type: 'POST',
        xhr: function() {  // custom xhr

            myXhr = $.ajaxSettings.xhr();

            if (myXhr.upload) { // check if upload property exists
                myXhr.upload.addEventListener('progress',progressHandlingFunction, false); // for handling the progress of the upload
            }

            return myXhr;

        },

        //Ajax events
        beforeSend: function() { console.log("before send function works"); },
        success: function(e) {
            console.log(e);
        },
        error: function() { console.log("error function works"); },

        // Form data
        data: formData,

        //Options to tell JQuery not to process data or worry about content-type
        cache: false,
        contentType: false,
        processData: false
    });

    return false;

});

PHP

For testing purposes, the upload.php file only has <?php echo "success"; ?>

Using Chrome's network developer tool, I don't see my file being transferred anywhere. Anybody see a glaring hole in my code? Thanks

The error and the "beforesend" functions return each time. What error are you given? — Josh Mein
– Josh Mein, Commented Jul 31, 2012 at 13:38
Console log just prints what I specified in the error function: "error function works" — izolate
– izolate, Commented Jul 31, 2012 at 13:40

Josh Mein · Accepted Answer · 2012-08-01 12:07:20Z

1

If your error function is being called, then the answer is most likely within its result. Please check what error is being returned as displaying error function works does you no good.

error: function(xhr, status, error) {
    alert(xhr.responseText);
    // OR
    alert(status + " : " + error);
}

Edit: Also to note, I believe you need to handle the saving of file that you are trying to upload. This tutorial for uploading files in php may be useful.

edited Aug 1, 2012 at 12:07

answered Jul 31, 2012 at 13:46

Josh Mein

28.6k15 gold badges79 silver badges89 bronze badges

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

4 Comments

izolate Over a year ago

I agree my error function is silly. Using the one you gave me, it just refreshes the page but not before displaying this in the console: Uncaught TypeError: Cannot ready property 'Message' of undefined

Josh Mein Over a year ago

@muppethead Thats interesting. I have updated my answer with something else I have done before.

izolate Over a year ago

Ah ha! Yes, your edit proved helpful. The error said progressHandlingFunction was not defined. So, I added the progress handling function and now the form doesn't return the error function. But instead I get a 500 Internal Server Error. Is that because I'm working locally with MAMP?

izolate Over a year ago

Actually, forget that. My php file had badly commented out text that caused the 500 ISE. Everything now works as it should. Thanks for your help Josh

Collectives™ on Stack Overflow

HTML file upload with jQuery/Ajax not working

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related