javascript - Android浏览器中使用FileReader读取云图片

Question

我有以下 JavaScript，它提供图像上传按钮并显示图像:

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();            
        reader.onload = function (e) {
            $('#target').attr('src', e.target.result);
        }

        reader.readAsDataURL(input.files[0]);
    }
}

$("#imgInp").change(function(){
    readURL(this);
});

完整的 jsfiddle 在这里: http://jsfiddle.net/6NXwv/

此代码适用于我尝试过的所有移动浏览器，除了原生的 Android 浏览器。具体来说，仅当图像远程存储但出现在图库中时(例如同步的 facebook 或 picasa 图像)，图像才会加载失败。现在我知道 FileReader 仅适用于本地文件，但是 chrome 浏览器、opera 和 firefox mobile 没有问题。

我检查了 FileReader 错误代码，看来来自 facebook/picasa 的图库图像返回 NOT_FOUND_ERR: https://developer.mozilla.org/en-US/docs/Web/API/FileError

如果这是 FileReader 无法读取远程文件的情况，为什么它可以在所有其他移动浏览器中工作？

我找不到其他人有这个确切的问题，我谷歌搜索的所有内容都不断返回这个结果: Issue with stock Browser picking photos from Gallery

但是，mime 类型似乎被正确检测到。 MIME 类型显示，文件名显示正确的名称，但实际数据不存在(File.size 也报告“0”)。我已经能够在 4.4 和 4.3 的 Android 浏览器上重新创建它。尚未测试旧版本。

简而言之，当通过图库选择照片时，本地文件和用相机拍摄的新图像会正确加载，但远程 facebook/picasa 文件(至少在 4.4 上，图库中的缩略图上有小 fb/picasa 图标)不会加载加载。仅出现在原生浏览器中。

Answer 1

您遇到的错误有 2 个解释。

1. 第一个解释是，您尝试使用 HTML5 API FileReader 读取的文件“图像”会被其他应用程序“如 Facebook 或 Picasa”查看或使用，在这种情况下，您无法通过 js 对它执行任何操作，除非您有对硬件“电话”的物理访问。
2. 第二种解释更有可能是某些浏览器无法触发 FileReader 的 onload 事件，因为它们不完全支持此 HTML5 API。您可以在 caniuse 网站上阅读更多相关信息。这可以通过将事件 onload 更改为 onloadend 来解决。

您的代码应该是这样的:

var reader = new FileReader(); 
reader.onloadend = function () { 
    console.log(reader.result); 
}; 
reader.readAsDataURL(file);

这里是示例:jsfiddle

这里是演示:Demo FileReader Html5