Question

I have a problem posting file via ajax jQuery function. I have something like this:

$('#my_form').submit(function() {
       var serialized = $(this).formSerialize();
       var sUrl = "xxx";

       $.ajax({
           url: sUrl,
           type: "POST",
           data: serialized,
           success: function(data) {
               $(".main_container").html(data);
           }
       })
       return false; // THIS return statment blocks sending file content
    });

When I remove return false statement everything is okey, server side gets the file content and etc, but when it’s there (i monitor with firebug) that this posting sends only file name. What can be wrong?

P.S. – I need this return false statement, because I want to manipulate return data myself.

Answer 1

First stop — the manual.

Data from file select elements is not serialized.

From http://api.jquery.com/serialize/

You can’t read local files with JS, so you can’t submit them using XMLHttpRequest.

jQuery – receiving the $_FILES array using $.post lists a number of alternative approaches.