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仅适用于LOCAL文件，但chrome浏览器，opera和firefox mobile都没有问题。

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

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

我找不到其他人有这个确切的问题，我google的所有内容都会返回此结果： Issue with stock Browser picking photos from Gallery

然而，似乎正确检测到mime类型。显示mime类型，文件名显示正确的名称，但实际数据不在那里（File.size报告＆＃39; 0＆＃39;）。我已经能够在4.4和4.3的股票Android浏览器上重新创建它。 Haven没有测试旧版本。

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

Answer 1

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

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

以下是您的代码应该如何：

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

这里是示例：jsfiddle

这是Demo：Demo FileReader Html5

使用FileReader在Android浏览器中读取云图像

2 个答案: