使用 jQuery 从文件输入中获取 blob 图像答案

【问题标题】：Get blob image from file input using jQuery使用 jQuery 从文件输入中获取 blob 图像
【发布时间】：2015-05-24 13:36:39
【问题描述】：

我在使用 jQuery 将图像作为 blob 时遇到一些问题：

这是我的代码：

var file = $("#imgGaleria3")[0].files;

if (file) {
    var reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function(e) {
        // browser completed reading file - display it
        alert(e.target.result);
    };
}

而且我总是遇到同样的错误：未捕获的 TypeError：无法在“FileReader”上执行“readAsDataURL”：参数 1 不是“Blob”类型。

我该如何解决？我尝试了一些方法来使用 FileReader 从文件对象中读取数据，但没有解决我的问题。

谢谢你们的帮助

【问题讨论】：

您应该在分配reader.onload 之后输入reader.readAsDataURL(file);。 $("#imgGaleria3")[0].files 是一个文件数组。你应该使用$("#imgGaleria3")[0].files[0]
我不明白我为什么要放：reader.readAsDataURL(file);在 reader.onload 之后，但你有文件数组的原因.. thx too mate
因为它可能在附加加载功能之前完成读取文件。
我如何存储这个值？我需要存储三个图像和一些数据，并且有一些问题，因为这个函数是异步的..
你应该把相同的函数放在每个 onload 函数的末尾，这个函数会做两件事，首先它确保所有 3 个都被加载，否则它会停止。如果加载了所有 3 张图像，它将继续执行。

标签： jquery html file

【解决方案1】：

这行看起来不对：

var file = $("#imgGaleria3")[0].files;

您需要 file 是单个文件而不是所有文件。

例子：

var file    = document.querySelector('input[type=file]').files[0];

或jQuery方式：

var file = $("#imgGaleria3")[0].files[0];

【讨论】：

【解决方案2】：

您正在尝试在数组上执行读取器。

试试

var file = $("#imgGaleria3")[0].files[0];

if (file) {
    var reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function(e) {
        // browser completed reading file - display it
        alert(e.target.result);
    };
}

【讨论】：

谢谢，我使用 Jquery 文件输入插件进行测试，它的工作原理