Send file source 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 using an ajax request.

This example works, but it has one error. The saved file has 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 start with this:

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

I can get us a .name to get a name. but how can I get raw file data?

Answer 1

 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/'; 

Answer 2

Raw file data is not available in this case, previously HTML 5 javascript APIs prevented access to files in the file system.

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

Answer 3

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

How to send message in iframe?

Yes, this is incredibly stupid, but it really is the way it is done.