问题描述:

My app uses many blob references to local image files created with with createObjectURL.

I need to convert these blob url references into what is essentially a javascript file object in order to upload them.

To retrieve the blobs I have jquery's Ajax function as show below:

var bloburl = 'blob:3c9230a9-55ea-4357-a2d3-db97673a1947';

$.ajax({

url : bloburl, //Blob URL reference

type : 'GET',

processData : false,

contentType : false,

success: function(file) {

//Here I am attempting to build an object that can be read by the FileReader API

var blob = new Blob([file], { type: 'image/jpeg' });

self.cache.filestoupload.push(blob);

}

});

Once the self.cache.filestoupload array has been populated the app begins to attack the first file in the array, slicing the first few bytes, then reading it as a binary string via the fileReader API. This slice of the file is then passed into a webworker and the image exif data is read. Then finally it begins to upload the full file.

var binaryReader = new FileReader();

binaryReader.onload = function (e) {

worker.postMessage({

guid: fileindex,

binary_string: binaryReader.result

});

};

binaryReader.readAsBinaryString(filePart);

Everything works perfectly with files retrieved in the standard manner from an HTML <input> element.

However the very same file when referenced via a blob URL, retrieved via an ajax request and then sliced and passed into the fileReader API fails. No exif data is returned and although the file uploads to the server the very same PHP script which handles the uploads fine also fails.

It appears that I am not retrieving the file correctly. Where am I going wrong?

To summarize, I need to be able to retrieve files referenced with the createObjectURL and pass them into the fileReader in the same format as if they were a standard javascript file object

UPDATE:

Okay I have made it work using a standard xhr request as follows:

 var xhr = new XMLHttpRequest();

xhr.open('GET', url, true);

xhr.responseType = 'blob';

xhr.onreadystatechange = function(e) {

if (xhr.readyState == 4) {

var myBlob = this.response;

self.cache.filestoupload.push(myBlob);

}

};

xhr.send();

How can I do the same using jQuery's $.Ajax method?

网友答案:

You cannot currently do this in jQuery 1.x or 2.x. See: https://github.com/jquery/jquery/pull/1525

相关阅读:
Top