<输入类型='文件'>提供了URL编码的文件名，导致Android本机浏览器上的FileRea

<input type='file'> provides URL encoded file name, causing File Not Found error with FileReader on Android native browser

本文关键字：文件名 FileRea 导致 本机 编码 Android 浏览器 类型 输入 lt 文件      更新时间：2023-09-26

我有一个AngularJS web应用程序，我使用<file type='input' accept='image/*'>来选择图像。

通过绑定文件输入的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 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属性，我无法更改它。

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

这是我的案例研究，但很老套。我开发的移动Web应用Android现在可能的情况。HTML标签是

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

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

相关文章：