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

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>的 File 直接发送到 ObjectURL，保持代码同步并减少代码行数，从而省去了很多麻烦。

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

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

之所以可行，是因为文件 是Blob per spec (正如 Ray Nicholus 所指出的)

---

不建议(因为 File 已经从 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将 Blob 作为第一个参数。请记住，由于 readAsArrayBuffer导致我们使用 callback ，我们必须编写它才能在异步环境中工作。