[英]How to get the source of an image from upload form?
我的第一个较大的项目之一,请耐心等待。 我有一个脚本,可以帮助我调整图像大小并将其转换为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错误。
与其通过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指出)
不建议这样做(因为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
,因此我们必须编写此callback
,以便它可以在异步环境中工作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.