Send raw file data from input type=file over ajax

Question

I have a simple form:

<form enctype="multipart/form-data" id="imageupload">
   <input name="files" type="file" />
   <input type="button" value="Upload" />
</form>

Now I want to send all the files with a ajax request.

This sample works, but it has one bug. In the file I save there are additional information:

-----------------------------169443243924626
Content-Disposition: form-data; name="files"; filename="shelby.png"
Content-Type: image/png


       $.ajax({
       url: 'imageupload.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: beforeSendHandler,
       //success: completeHandler,
       //error: errorHandler,
       // Form data
       data: new FormData($('#imageupload')[0]),
       //Options to tell JQuery not to process data or worry about content-type
       cache: false,
       contentType: 'multipart/form-data',
       processData: false
   });

now i startet with this:

$('#imageupload')[0].files.files[0]

I can us .name i get the name. but how can I get the raw file data?

score 2 · Answer 1 · answered Feb 22 '12 at 13:15

try this

 $filename =  $_FILES['ur_image']['name'] ;
 $filesize =  $_FILES['ur_image']['size']; 
 $erro     =  $_FILES['ur_image']['error']; //checks UPLOAD_ERR_OK
 $tmpname  = $_FILES['ur_image']['tmp_name'];              
 $dest     = ROOT_DIR.'/upload/logo/';

score 1 · Answer 2 · answered Feb 22 '12 at 13:06

1

The raw file data is not available that way, pre HTML 5 the javascript APIs prevented access to files on the file-system.

Nowadays in a modern browser you can use the javascript file API.

answered Feb 22 '12 at 13:06

hakre

193,403
52
435
836

score 0 · Answer 3 · edited May 23 '17 at 12:27

It can be done via HTML 5's file apis (as mentioned), but it is still quite difficult. The way that this is done as an unofficial standard is to post the results of your form into a hidden iframe and to submit your form via javascript. When the post loads in the iframe, you include tags that call a callback function defined on the parent window such as window.parent.doSomething();

How do you post to an iframe?

Yes, it is incredibly stupid, but this really is how it is done.

Send raw file data from input type=file over ajax

3 Answers3