javascript - <input type ='file'> 提供 URL 编码的文件名，导致 FileReader 在 Android native 浏览器上出现 File Not Found 错误

Question

我有一个 AngularJS 网络应用程序，我正在使用 <file type='input' accept='image/*'>用于选择图像。

我通过绑定(bind)文件输入的 change 向用户显示新选择的图像事件，用 FileReader 读取它的 readAsDataURL方法并将结果分配给图像的 src 属性。简而言之，它看起来像这样:

input.bind('change', function (evt) {
    var fileList = evt.target.files;
    if (fileList != null) {
       var file = fileList.item(0),
           reader = new FileReader();

       reader.onloadend = function (evt) {
           if (evt.target.readyState == FileReader.DONE) {
               // result is assigned to src attribute of an image element
           }
       };

       reader.onerror = function (evt) {
           alert(evt.target.error.code);
       };

       reader.readAsDataURL(file);
    }
}

这适用于:

• 当前的桌面浏览器
• iOS(iOS 8.0 除外，因为存在阻止从 Safari 上传照片和视频的已知错误)
• Chrome 移动版
• Android 上的大多数 native 浏览器，但不是全部!

例如，我的运行在 Android 4.4.2 上的 HTC One 在尝试使用 FileReader 从存储中读取图像时有时会遇到未找到文件错误。

我认为在此设备上提供的 file.name URL 编码，将类似“My Image.jpg” 的文件名转换为“My%20Image.jpg”。由于 FileReader 按原样获取文件名，它只是访问“错误的”、不存在的文件。这NOT_FOUND_ERR不受 URL 编码影响的文件名不会发生错误，例如“20141028.jpg”。

在将文件名传递给 FileReader 之前，我尝试自己对文件名进行 URL 解码，但是由于 File.name是 read only我无法更改它。

所以我想知道，解决所提供文件信息的这种“错位”的最佳解决方案是什么？

Answer 1

这是我的案例研究，但旧提示。我开发移动 Web 应用程序 Android 现在可能的情况。HTML 标签是

<input type='file' accept='image/*;capture=camera' onchange='open File(event)'>

它改变了。在这个 html 标签之前不是选择文件，而是在 html 标签之后选择。适用于 Chrome 和 Android Chrome。谢谢。