HTML5 File API 中的 FileReader.readAsText 如何工作?

我使用 HTML5 文件 API 编写了以下代码来检查上传的文件是否存在.

<input type="file" id="myfile"><button type="button" onclick="addDoc()">添加文档</button><p id="DisplayText"></p>

以下JavaScript代码已映射到它如下:

函数 addDoc() {var file=document.getElementById("myFile").files[0];//输入类型=文件var reader=new FileReader();reader.onload = 函数(e){}reader.readAsText(文件);var 错误 = reader.error;var texte=reader.result;document.getElementById("DisplayText").innerText=reader.result;/*<p id="显示文本>*/}

从本地系统浏览文件后,我尝试在单击 addDoc() 之前从文件夹中删除已浏览"的文档.单击按钮后,我仍然可以看到 Filereader.result 不为空,并且可以显示所有内容.

有人可以解释一下Filereader 的工作原理吗?FileReader 是不是文件一被浏览就被绑定了?

也可以用FileReader检查系统的Readonly属性是否类似于Java的File.canread()?

有人可以就此提出建议吗?我有IE11来测试代码.

解决方案

FileReader load 事件异步设置 .result 值.要访问 .result 使用 loadloadend 事件.

当在 <input type="file"> Choose FileBrowse... UI 中选择了文件时,在本地文件系统删除文件不应影响 .files 调用返回的 FileList 处的 File 对象.请参阅 2.9.2.可传输对象,6.7.3 DataTransfer 接口.

<块引用>

4.Blob 接口和二进制数据

每个 Blob 必须有一个内部 快照状态,其中必须初始设置为底层存储的状态(如果有)这种底层存储存在,并且必须通过结构化克隆.snapshot state 的进一步规范定义可以在 文件s.

<块引用>

2.9.8 猴子Blob 和 FileList 对象的补丁

这个猴子补丁将在适当的时候被删除.请参阅 w3c/FileAPI第 32 期.

Blob 对象是 可克隆对象.

  1. 每个 Blob 对象的 [[Clone]] 内部方法,给定 targetRealm 并忽略内存,必须运行以下步骤:

  2. 如果这是 已关闭,则抛出一个 "DataCloneError" DOMException.

在targetRealm中返回一个新的this实例,对应于相同的基础数据.

FileList 对象是 可克隆对象.

每个 FileList 对象的 [[Clone]] 内部方法,给定targetRealm 和 memory,必须运行这些步骤:

  1. 让output成为targetRealm中的一个新的FileList对象.

  2. 对于 this 中的每个 file,添加 ?[StructuredClone][15](_file, targetRealm, memory_)文件对象输出.

返回输出.

<小时>

在 webkit 和 firefox 浏览器中选择只读文件或文件夹

在 chrome 中,如果在本地文件系统中为文件设置了只读权限并且用户在 <input type="file"> 元素处选择文件,则为 chromium,其中 FileReader 用于读取文件,在 FileReader 处抛出错误,由 FileReader progress 事件生成.

如果将 Blob URL 设置为相同的文件对象,则 blob: URL 将不会根据对 Blob 的请求返回只读文件网址.

选择文件夹权限设置为只读的文件夹

铬、铬

在 chrome 中,设置了 webkitdirectory 属性并选择具有只读权限的文件夹 FileList .length of event 的 chromium.target.files 返回 0;event.target.files.webkitGetAsEntry() 未被调用,未选择文件"<input type="file"> 处呈现代码> shadowDOM.当文件夹被放置在 <input type="file">droppable 属性设置的元素处时,目录 .name 和 <drop event.dataTransfer处显示只读文件夹的code>.path.

当用户在 <textarea> 元素处放置文件或文件夹时,其中没有附加 drop 事件 beforeunload 事件被调用并提示显示在 UI 上

<块引用>

你想离开这个网站吗?您所做的更改可能不会保存.<留下><离开>//<按钮>

火狐

在 Firefox 47.0b9 版中,allowdirs 属性设置在 元素中,用户单击 "选择文件夹.." <input>,父文件夹的.name文件夹和.path可在访问.then() 链接到 event.target.getFilesAndDirectories().递归迭代 Directory 条目时,不返回所选文件夹中包含的文件或文件夹;返回一个空字符串.

如果用户点击"Choose file..." <input> 并且选择了一个没有设置只读权限的文件夹,当文件管理器的文件夹是单击后,将列出文件夹中的文件.

如果选择了设置了只读权限的文件夹,则会在 UI 显示时呈现 alert() 通知

<块引用>

 无法读取<目录名>的内容没有权限

错误、安全问题

*nix 操作系统

当用户在 <textarea> 元素放置文件夹时,其中没有附加 drop 事件,用户文件系统中文件夹的完整路径 file: 协议已公开.文件夹中包含的文件的路径也没有设置为.value;例如,

"file:///home/user/Documents/Document/"

当文件在 <textarea> 元素中被删除时,其中未附加 drop 事件,用户文件系统中文件的完整路径设置为 .value of <textarea>;也就是说,

"file:///home/user/Documents/Document/MyFileFullPathDisplayedAtTextAreaValue.txt"

如果在<textarea> 元素处选择并删除了多个文件,则所有完整文件路径都设置为