如何从上传表单中获取图像的来源？

Question

我最初的大型项目之一,所以请耐心等待.我有一个脚本,可以帮助我调整图像大小并将其转换为base64.这就是它的开始:

var createImage = function (src) {
    var deferred = $.Deferred();
    var img = new Image();

    img.onload = function() {
        deferred.resolve(img);
    };
    img.src = src;
    return deferred.promise();
};

我的问题是从上传表单到脚本获取图像源？

我尝试使用Filereader API拼接(在其他来源的帮助下)一个函数:

var createImageURL = function () {
    var fileinput = document.getElementById('fileinput');
    file = fileinput.files[0];
    var reader = new FileReader();
    reader.readAsArrayBuffer(file);

    reader.onload = function (event) {
      var blob = new Blob([event.target.result]); 
      window.URL = window.URL || window.webkitURL;

      var blobURL = window.URL.createObjectURL(blob);

    }
    return blobURL;
};

但是,这会在控制台中返回GET错误.

Answer 1

而不是通过Blob,直接将您<input>的文件转换为ObjectURL,通过保持代码同步并减少代码行数,可以省去很多麻烦.

function inputToURL(inputElement) {
    var file = inputElement.files[0];
    return window.URL.createObjectURL(file);
}

var url = inputToURL(document.getElementById('fileinput'));
createImage(url);

这是有效的,因为文件是每个规格的Blob (由Ray Nicholus指出)

不建议(因为文件已经从Blob继承)并且非常不寻常想要在它们之间进行转换,但并非不可能.我将其包括在内,以便您可以在将来看到如何构建FileReader代码,而不是解决您的问题.要将<input type="file" />第一个文件转换为Blob,您可以这样做

function fileToBlob(inputElement, callback) {
    var fileReader = new FileReader();
    fileReader.onload = function () {
        callback(new Blob([this.result]));
    }
    fileReader.readAsArrayBuffer(inputElement.files[0]);
}

凡callback需要一滴,因为它是第一个参数.请记住,由于readAsArrayBuffer导致我们使用a callback,我们必须写这个,以便它可以在异步环境中工作.