Ajax file upload

Question

Hi, I have a form that upload a file, I would process the file inline with ajax but I don't know how I can get the data with ajax.

In my script I use this method:

 $.ajax(
            {
                type:    "POST",
                url:     "upload.php",
                data:    ({ file : '???' }),
                success: function(msg)
                {
                    $('#upload_box').html(msg);
                }
            });

How I can declare the 'file' var fetching the file data? (filename, tmp_name, type, size, etc).

Answer 1

You can't do this with a standard AJAX request. The most common workaround is to post the file to a hidden iFrame as seen in this tutorial.

Since you are using jQuery, you may find the AJAX Upload library useful.

Answer 2

You could upload the file to the server, call a php script to read it back to you and then dump it into whatever tag you wanted to read from

   //In your onUpload callback
   var req = createRequest();
   req.open("GET", 'upload.php?file=' + filename,true);

   req.send(null);
   //Do your status checking
   var filetext= req.responseText;

Frameworks don't solve all problems, and if you are using one that requires work arounds, you should return to basics, because this CAN be done using vanilla javascript with some PHP.

Answer 3

I've solved with the Jquery Form Plugin (http://malsup.com/jquery/form/)