Question

我的应用程序对使用createObjectURL创建的本地图像文件使用了许多blob引用。

我需要将这些blob url引用转换为基本上是javascript file对象才能上传它们。

要检索blob，我有jquery的Ajax函数，如下所示：

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);
                }
            });

填充self.cache.filestoupload数组后，应用程序开始攻击数组中的第一个文件，切片前几个字节，然后通过fileReader API将其作为二进制字符串读取。然后将该文件片段传递给webworker并读取图像exif数据。最后它开始上传完整的文件。

var binaryReader = new FileReader();

    binaryReader.onload = function (e) {
        worker.postMessage({
            guid: fileindex,
            binary_string: binaryReader.result
        });

    };
    binaryReader.readAsBinaryString(filePart);

对于从HTML <input>元素以标准方式检索的文件，一切都完美无缺。

然而，通过blob URL引用的同一文件，通过ajax请求检索然后切片并传递到fileReader API失败。没有返回exif数据，虽然文件上传到服务器，处理上传的完全相同的PHP脚本也会失败。

看来我没有正确检索文件。我哪里错了？

总而言之，我需要能够检索用createObjectURL引用的文件，并将它们传递给fileReader，格式与它们是标准的javascript file对象相同

更新

好的，我使用标准xhr请求使其工作如下：

 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();

如何使用jQuery的$ .Ajax方法做同样的事情？

Answer 1

目前你无法在jQuery 1.x或2.x中执行此操作。请参阅：https://github.com/jquery/jquery/pull/1525

如何使用filereader API获取BLOB URL引用并正确读取？

1 个答案: