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

2022-01-11 00:00:00 drag-and-drop javascript html textarea fileapi

我使用 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 使用 load 或 loadend 事件.

当在 <input type="file"> Choose File 或 Browse... 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 对象是 可克隆对象.

每个 Blob 对象的 [[Clone]] 内部方法，给定 targetRealm 并忽略内存，必须运行以下步骤:
如果这是 已关闭，则抛出一个 "DataCloneError" DOMException.

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

FileList 对象是可克隆对象.

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

让output成为targetRealm中的一个新的FileList对象.
对于 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> 元素处选择并删除了多个文件，则所有完整文件路径都设置为 的<code>.value</code>.</code>，由换行符 <code>
</code></p> 界定</p><pre><code>"file:///home/user/Documents/Document/MyFileFullPathDisplayedAtTextAreaValue1.txt"file:///home/user/Documents/Document/MyFileFullPathDisplayedAtTextAreaValue2.txt"..</code></pre><p><code>XMLHttpRequest()</code> 用于文件路径，错误记录在 <code>console</code></p><pre><code>NS_ERROR_DOM_BAD_URI:访问受限 URI 被拒绝</code></pre><p>当设置为 <code><img></code> 元素的 <code>.src</code> 且 <code>.crossOrigin</code> 设置为 <code>"anonymous"</code> <code>img</code> <code>error</code> 事件处理程序被调用</p><p>调用 <code>window.open()</code> 并在第一个参数处设置完整路径</p><pre><code>错误:从脚本访问 '"file:///home/user/Documents/Document/MyFileFullPathDisplayedAtTextAreaValue.png"' 被拒绝</code></pre><p><h2>规格</h2><p>4.10.5.1.18.文件上传状态(<code>type=file</code>)</p><块引用><p>示例 16</p><p>由于历史原因，<code>value</code> IDL 属性前缀带有字符串<code>C:fakepath</code>"的文件名.一些旧版用户代理实际上包括完整路径(这是一个安全漏洞).因此，从 <code>value</code> IDL 获取文件名向后兼容的属性是不平凡的.</p></blockquote><p></p><p>4.10.5.4.常见的 <code><input></code> 元素 API</p><块引用><p>文件名 </p><p>在获取时，它必须返回字符串C:fakepath"，后跟 <code>已选择文件</code>，如果有的话，或者如果列表为空，则为空字符串.在设置，如果新值是空字符串，它必须清空列表<code>选定文件</code>；否则，它必须抛出<code>InvalidStateError</code>"<code>DOMException</code>.</p><块引用><p>注意:这种虚假路径"要求是历史的不幸事故.请参阅 文件上传 中的示例状态部分了解更多信息.</p><p>注意:由于<code>选择文件</code>列表中的文件名中不允许出现<code>路径组件</code>，因此<code>fakepath</code>" 不会弄错的用于路径组件.</p></blockquote><p></blockquote><p></p><p>4.10.5.1.18.文件上传状态(<code>type=file</code>)</p><p><h2>路径组件</h2></p><块引用><p>当 <code><input></code> 元素的 <code>type</code> 属性在 <code>File Upload</code> 中时声明，本节中的规则适用.</p><p><code><input></code> 元素 <code>表示</code> <code>选定文件</code>的列表，每个文件由文件名、文件类型和文件主体(文件的内容).</p><p>文件名不得包含 <code>路径组件</code>，即使在 a用户选择了整个目录层次结构或多个文件来自不同目录的相同名称.路径组件，用于<code>File Upload</code> 状态的目的是文件名的那些部分由 U+005C REVERSE SOLIDUS 字符 () 字符分隔.</p></blockquote><p>错误报告 https://bugzilla.mozilla.org/show_bug.cgi?id=1311823</p><小时><h3>在 <textarea> 放置文件在数据 URI 处</h3><p>Neal Deakin 在错误报告中发表评论</p><块引用><p>我认为提到的步骤是:</p><ol><li>打开数据:text/html，</li><li>将文件从桌面拖到文本区域</li></ol><p>我可以在 Linux 上重现这个，但不能在 Windows 或 Mac 上重现.</p><p>上面的预感是正确的；Linux 将数据包含为 url 和明文也是如此.</p></blockquote><p>在 <code>data:</code> prototcol <code>data URI</code> 在 firefox 和 chrome, chromium 中删除文件</p><pre><code>data:text/html,<textarea></textarea></code></pre><p><h3>火狐</h3><p>文件或文件夹的完整路径名设置为<code><textarea>的<code>.value</code>.</p><h3>铬、铬</h3><p>在 <code>data URI</code> 放置文件，在 chrome 中只有 <code>textarea</code> 元素，chromium 在地址栏用放置的文件路径替换 <code>data URI</code>，并且在同一选项卡中加载拖放的文件，将 <code>data URI</code> 替换为拖放文件的内容.</p><p>plnkr http://plnkr.co/edit/ZfAGEAiyLLq8rGXD2ShE?p=preview</p><小时><p><code>html</code>, <code>javascript</code> 重现上述问题</p><pre><code><!DOCTYPE html><html><头><风格>身体 {高度:400px；}文本区域 {宽度:95%；身高:继承；}</风格><脚本>window.onload = 函数(){var button = document.querySelector("#myfile + button");var input = document.getElementById("myfile");var display = document.getElementById("DisplayText");变种文字=空；函数 readFullPathToFileOnUserFileSystem(e) {var path = e.target.value;控制台.log(路径)；var w = window.open(路径，_blank")；var img = 新图像；img.crossOrigin = "匿名";img.onload = 函数() {document.body.appendChild(this);}img.onerror = 函数(错误){console.log("img 错误", err.message)}img.src = 路径；var request = new XMLHttpRequest();request.open("GET", path.trim(), true);request.onload = function() {console.log(this.responseText)}request.error = 函数(错误){控制台日志(错误消息)}请求.发送()；}display.addEventListener("输入", readFullPathToFileOnUserFileSystem);input.addEventListener("改变", addDoc);input.addEventListener("进度", function(event) {console.log("进度", 事件)});button.addEventListener("点击", handleText)函数添加文档(事件){var mozResult = [];功能 mozReadDirectories(条目，路径){console.log("目录", 条目, 路径);return [].reduce.call(entry, function(promise, entry) {返回 promise.then(function() {console.log("入口", 入口);return Promise.resolve(entry.getFilesAndDirectories() || entry).then(函数(目录){console.log("dir getFilesAndDirectories", dir)返回目录})})}, Promise.resolve()).catch(函数(错误){控制台日志(错误，错误消息)}).then(函数(项目){console.log("items", items);var dir = items.filter(函数(文件夹){返回文件夹 instanceof 目录});var files = items.filter(function(file) {返回文件 instanceof File});如果(文件长度){console.log("文件:", 文件, 路径);mozResult = mozResult.concat.apply(mozResult, 文件);}如果(目录长度){console.log(dir, dir[0] instanceof Directory, dir[0]);返回 mozReadDirectories(dir, dir[0].path || path);} 别的 {如果(！dir.length){return Promise.resolve(mozResult).then(function(complete) {返回完成})}}}).catch(函数(错误){控制台日志(错误)})};console.log("文件", event.target.files);if ("getFilesAndDirectories" in event.target) {return (event.type === "drop" ? event.dataTransfer : event.target).getFilesAndDirectories().then(函数(目录){if (dir[0] instanceof 目录) {控制台日志(目录)返回 mozReadDirectories(dir, dir[0].path || 路径).then(函数(完成){console.log("完成:", 完成);event.target.value = null;});} 别的 {if (dir[0] instanceof File && dir[0].size > 0) {返回 Promise.resolve(dir).then(函数(完成){console.log("完成:", 完成);})} 别的 {if (dir[0].size == 0) {throw new Error("could not process '" + dir[0].name + "' directory" + " at drop event at firefox, upload folder at 'Choose folder...' input");}}}}).catch(函数(错误){控制台日志(错误)})}var reader = new FileReader();reader.onload = 函数(e){文本=读者.结果；console.log("FileReader.result", text);button.removeAttribute("禁用");}reader.onerror = 函数(错误){console.log(err, err.loaded, err.loaded === 0, 文件);button.removeAttribute("禁用");}reader.onprogress = function(e) {console.log(e, e.lengthComputable, e.loaded, e.total);}reader.readAsArrayBuffer(file);}函数句柄文本(){//用 `text` 做事:`addDoc` 中的 `reader.result`display.textContent = 文本；button.setAttribute("禁用", "禁用");//如果不需要或再次引用，将 `text` 设置为 `null`文本=空；}}</脚本></头><身体><input type="file" id="myfile" webkitdirectory 目录allowdirs><button type="button" disabled>添加文档</button><br><br><textarea id="DisplayText"></textarea></身体></html></code></pre><p>plnkr http://plnkr.co/edit/8Ovw3IlYKI8BYsLhzV88?p=preview</p><小时><p>您可以使用附加到 <code>#myfile</code> 元素的 <code>change</code> 事件来处理用户的文件选择操作.</p><p>用 <code><textarea></code> 元素替换 <code><p></code> 元素以显示来自 <code>.readAsText() 的 <code>load</code> 事件的结果</code> 调用.</p><p>要在 <code>button</code> 元素的 <code>click</code> 处显示 <code>FileReader</code> 的 <code>.result</code>，请设置变量 <code>text</code> 到 <code>reader.result</code> 内 <code>FileReader</code> 的 <code>load</code> 事件中 <code>click</code> 事件的 <code>button</code> 将 <code>#DisplayText</code> 元素的 <code>.textContent</code> 设置为引用先前设置的变量 <code>reader.result</code>.</p><p></p></p></p><pre class="snippet-code-html lang-html prettyprint-override"><code><!DOCTYPE html><html><风格>身体 {高度:400px；}文本区域 {宽度:95%；身高:继承；}</风格><头><脚本>window.onload = 函数(){var button = document.querySelector("#myfile + button");var input = document.getElementById("myfile");var display = document.getElementById("DisplayText");变种文字=空；input.addEventListener("改变", addDoc);button.addEventListener("点击", handleText)函数添加文档(事件){var 文件 = this.files[0]var reader = new FileReader();reader.onload = 函数(e){文本=读者.结果；button.removeAttribute("禁用");}reader.onerror = 函数(错误){console.log(err, err.loaded, err.loaded === 0， 文件);button.removeAttribute("禁用");}reader.readAsText(event.target.files[0]);}函数句柄文本(){//用 `text` 做事:`addDoc` 中的 `reader.result`display.textContent = 文本；button.setAttribute("禁用", "禁用");//如果不需要或再次引用，将 `text` 设置为 `null`文本=空；}}</脚本></头><身体><input type="file" id="myfile" accept="text/*"><button type="button" disabled>添加文档</button><br><br><textarea id="DisplayText"></textarea></身体></html></code></pre><p><p><p></p><p>I wrote the following code to check whether the uploaded file exists or not using HTML5 file API.</p>

<p></p>
</p>
</p><pre class="snippet-code-html lang-html prettyprint-override"><code><input type="file" id="myfile">
<button type="button" onclick="addDoc()">Add Document</button>
<p id="DisplayText"></p></code></pre><p>
<p>
<p>
</p>

<p>The following JavaScript code has been mapped to it is as follows:</p><pre><code>function addDoc() {
  var file=document.getElementById("myFile").files[0]; //for input type=file
  var reader=new FileReader();
  reader.onload = function(e) {}
  reader.readAsText(file);
  var error = reader.error;
  var texte=reader.result;
  document.getElementById("DisplayText").innerText=reader.result; /*<p id="DisplayText>*/
}
</code></pre><p>After browsing a file from local system I tried to delete the "browsed" document form the folder before clicking on <code>addDoc()</code>. After clicking the button I could still see <code>Filereader.result</code> is not null and could display all the content.</p>

<p>Can someone explain on how the Filereader works? Is it that the FileReader gets bound as soon as the file is browsed?</p>

<p>Also can we check whether the system Readonly Attribute with FileReader similar to Java <code>File.canread()</code>?</p>

<p>Could someone suggest on this? I have IE11 to test the code.</p> 解决方案 <p><code>FileReader</code> <code>load</code> event sets the <code>.result</code> value asynchronously. To access the <code>.result</code> use <code>load</code> or <code>loadend</code> event. </p>

<p>When a file has been selected at <code><input type="file"></code> <code>Choose File</code> or <code>Browse...</code> UI, deleting file at local filesystem should not effect the <code>File</code> object at <code>FileList</code> returned by <code>.files</code> call. See 2.9.2. Transferable objects, 6.7.3 The DataTransfer interface.</p><blockquote>
  <p>4. The Blob Interface and Binary Data</p>
  
  <p>Each <code>Blob</code> must have an internal snapshot state, which
  must be initially set to the state of the underlying storage, if any
  such underlying storage exists, and must be preserved through
  <code>structured clone</code>. Further normative definition of <code>snapshot state</code> can be found for <code>File</code>s.</p>
</blockquote><p></p><blockquote>
  <p>2.9.8 Monkey patch for Blob and FileList objects</p>
  
  <p>This monkey patch will be removed in due course. See w3c/FileAPI
  issue 32.</p>
  
  <p><code>Blob</code> objects are <code>cloneable objects</code>.</p><ol>
  <li><p>Each <code>Blob</code> object's [[<code>Clone</code>]] internal method, given targetRealm and ignoring memory, must run these steps:</p></li>
  <li><p>If this is <code>closed</code>, then throw a <code>"DataCloneError"</code> <code>DOMException</code>.</p></li>
  </ol><p>Return a new instance of this in targetRealm, corresponding to
  the same underlying data.</p>
  
  <p><code>FileList</code> objects are cloneable objects.</p>
  
  <p>Each <code>FileList</code> object's <code>[[Clone]]</code> internal method, given
  targetRealm and memory, must run these steps:</p><ol>
  <li><p>Let output be a new <code>FileList</code> object in targetRealm.</p></li>
  <li><p>For each file in this, add ? <code>[StructuredClone][15](_file, targetRealm, memory_)</code> to the end of the list of <code>File</code> objects
  of output.</p></li>
  </ol><p>Return output.</p>
</blockquote><p>

<hr>

<p><h1>Selecting read-only files or folders at webkit and firefox browsers</h1></p>

<p>At chrome, chromium if read-only permission is set for file at local filesystem and user selects file at <code><input type="file"></code> element, where <code>FileReader</code> is used to read file, an error is thrown at <code>FileReader</code>, generated from <code>FileReader</code> <code>progress</code> event.</p>

<p>If a <code>Blob URL</code> is set to the same file object, the <code>blob:</code> URL will not return the the read-only file at request to the <code>Blob URL</code>.</p>

<p><h2>Selection of folder where folder permission is set to read-only</h2></p>

<h3>Chrome, chromium</h3>

<p>At chrome, chromium where <code>webkitdirectory</code> attribute is set and folder is selected with read-only permission <code>FileList</code> <code>.length</code> of <code>event.target.files</code> returned <code>0</code>; <code>event.target.files.webkitGetAsEntry()</code> is not called, <code>"No file chosen"</code> is rendered at <code><input type="file"></code> <code>shadowDOM</code>. When a folder is dropped at <code><input type="file"></code> or element where <code>droppable</code> attribute set, the directory <code>.name</code> and <code>.path</code> of the read-only folder is displayed at <code>drop</code> <code>event.dataTransfer</code>. </p>

<p>When user drops file or folder at <code><textarea></code> element, where no <code>drop</code> event is attached <code>beforeunload</code> event is called and a prompr is displayed at UI</p><blockquote>
</p><pre><code>Do you want to leave this site?
Changes you made may not be saved.
<Stay><Leave> // <buttons>
</code></pre><p>
</blockquote><p>

<h3>Firefox</h3>

<p>At firefox version 47.0b9 with <code>allowdirs</code> attribute is set at <code><input type="file"></code> element, where user clicks <code>"Choose folder.."</code> <code><input></code>, the folder <code>.name</code> and <code>.path</code> of the parent folder are accessible at <code>.then()</code> chained to <code>event.target.getFilesAndDirectories()</code>. The files or folders contained within the selected folder are not returned when recursively iterating <code>Directory</code> entries; an an empty string is returned.</p>

<p>If user clicks <code>"Choose file..."</code> <code><input></code> and a folder is selected without read-only permission set, when the folder at file manager is clicked, the files in the folder are listed. </p>

<p>Where a folder is selected where read-only permission is set an <code>alert()</code> notification is rendered at UI displaying </p><blockquote>
</p><pre><code>  Could not read the contents of <directory name>
  Permission denied
</code></pre><p>
</blockquote><p>

<h2><h1>Bug, security issue</h1></h2>

<p>*nix OS</p>

<p>When user drops folder at <code><textarea></code> element, where no <code>drop</code> event is attached, the full path to the folder at user filesystem <code>file:</code> protocol is exposed. The paths to the files contained within the folder are not also set as <code>.value</code>; e.g.,</p><pre><code>"file:///home/user/Documents/Document/"
</code></pre><p>When a file is dropped at <code><textarea></code> element, where not <code>drop</code> event is attached, the full path to the file at user filesystem is set as <code>.value</code> of <code><textarea></code>; that is,</p><pre><code>"file:///home/user/Documents/Document/MyFileFullPathDisplayedAtTextAreaValue.txt"
</code></pre><p>If multiple files are selected and dropped at <code><textarea></code> element, all of the full file paths are set as <code>.value</code> of <code><textarea></code>, delineated by new line character <code>
</code></p><pre><code>"file:///home/user/Documents/Document/MyFileFullPathDisplayedAtTextAreaValue1.txt"
"file:///home/user/Documents/Document/MyFileFullPathDisplayedAtTextAreaValue2.txt"
..
</code></pre><p>Where an <code>XMLHttpRequest()</code> is made for the file path and error is logged at <code>console</code></p><pre><code>NS_ERROR_DOM_BAD_URI: Access to restricted URI denied
</code></pre><p>When set as <code>.src</code> of an <code><img></code> element with <code>.crossOrigin</code> set to <code>"anonymous"</code> the <code>img</code> <code>error</code> event handler is called</p>

<p>At call to <code>window.open()</code> with full path set at first parameter</p><pre><code>Error: Access to '"file:///home/user/Documents/Document/MyFileFullPathDisplayedAtTextAreaValue.png"' from script denied
</code></pre><p>

<h2>Specification</h2>

<p>4.10.5.1.18. File Upload state (<code>type=file</code>)</p><blockquote>
  <p>EXAMPLE 16</p>
  
  <p>For historical reasons, the <code>value</code> IDL attribute prefixes the
  file name with the string "<code>C:fakepath</code>". Some legacy user agents
  actually included the full path (which was a security vulnerability).
  As a result of this, obtaining the file name from the <code>value</code> IDL
  attribute in a backwards-compatible way is non-trivial.</p>
</blockquote><p></p>

<p>4.10.5.4. Common <code><input></code> element APIs</p><blockquote>
  <p>filename </p>
  
  <p>On getting, it must return the string "C:fakepath" followed by the name of the first file in the list of <code>selected
  files</code>, if any, or the empty string if the list is empty. On
  setting, if the new value is the empty string, it must empty the list
  of <code>selected files</code>; otherwise, it must throw an "<code>InvalidStateError</code>"
  <code>DOMException</code>.</p><blockquote>
    <p>NOTE: This "fakepath" requirement is a sad accident of history. See the example in the File Upload state section for more
    information.</p>
    
    <p>NOTE: Since <code>path components</code> are not permitted in file names in the list of <code>selected files</code>, the "<code>fakepath</code>" cannot be mistaken
    for a path component.</p>
  </blockquote><p>
</blockquote><p></p>

<p>4.10.5.1.18. File Upload state (<code>type=file</code>)</p>

<p><h2>Path components</h2></p><blockquote>
  <p>When an <code><input></code> element’s <code>type</code> attribute is in the <code>File Upload</code>
  state, the rules in this section apply.</p>
  
  <p>The <code><input></code> element <code>represents</code> a list of <code>selected files</code>,
  each file consisting of a file name, a file type, and a file body (the
  contents of the file).</p>
  
  <p>File names must not contain <code>path components</code>, even in the case that a
  user has selected an entire directory hierarchy or multiple files with
  the same name from different directories. Path components, for the
  purposes of the <code>File Upload</code> state, are those parts of file names
  that are separated by U+005C REVERSE SOLIDUS character () characters.</p>
</blockquote><p>Bug report https://bugzilla.mozilla.org/show_bug.cgi?id=1311823</p>

<hr>

<h3>Dropping file at <textarea> at data URI</h3>

<p>Following comment by Neal Deakin at bug report</p><blockquote>
  <p>I think the steps referred to are:</p><ol>
  <li>Open data:text/html,</li>
  <li>Drag a file from the desktop to the textarea</li>
  </ol><p>I can reproduce this on Linux, but not on Windows or Mac.</p>
  
  <p>The hunch above is correct; Linux is including the data as a url and
  plaintext as well.</p>
</blockquote><p>dropped files at <code>data:</code> prototcol <code>data URI</code> at firefox, and chrome, chromium</p><pre><code>data:text/html,<textarea></textarea>
</code></pre><p>

<h3>Firefox</h3>

<p>The full path name of file or folder set as <code>.value</code> of <code><textarea></code>.</p>

<h3>Chrome, chromium</h3>

<p>Dropping file at <code>data URI</code> having only <code>textarea</code> element at chrome, chromium replaces the <code>data URI</code> with dropped file path at address bar, and loads the dropped file at the same tab, replacing the <code>data URI</code> with the content of the dropped file.</p>

<p>plnkr http://plnkr.co/edit/ZfAGEAiyLLq8rGXD2ShE?p=preview</p>

<hr>

<p><code>html</code>, <code>javascript</code> to reproduce issue described above</p><pre><code><!DOCTYPE html>
<html>

<head>
  <style>
    body {
      height: 400px;
    }

    textarea {
      width: 95%;
      height: inherit;
    }
  </style>

  <script>
    window.onload = function() {
      var button = document.querySelector("#myfile + button");
      var input = document.getElementById("myfile");
      var display = document.getElementById("DisplayText");
      var text = null;

      function readFullPathToFileOnUserFileSystem(e) {
        var path = e.target.value;
        console.log(path);
        var w = window.open(path, "_blank");
        var img = new Image;
        img.crossOrigin = "anonymous";
        img.onload = function() {
          document.body.appendChild(this);
        }
        img.onerror = function(err) {
          console.log("img error", err.message)
        }
        img.src = path;
        var request = new XMLHttpRequest();
        request.open("GET", path.trim(), true);
        request.onload = function() {
          console.log(this.responseText)
        }
        request.error = function(err) {
          console.log(err.message)
        }
        request.send();

      }

      display.addEventListener("input", readFullPathToFileOnUserFileSystem);
      input.addEventListener("change", addDoc);
      input.addEventListener("progress", function(event) {
        console.log("progress", event)
      });
      button.addEventListener("click", handleText)

      function addDoc(event) {
        var mozResult = [];

        function mozReadDirectories(entries, path) {
          console.log("dir", entries, path);
          return [].reduce.call(entries, function(promise, entry) {
              return promise.then(function() {
                console.log("entry", entry);
                return Promise.resolve(entry.getFilesAndDirectories() || entry)
                  .then(function(dir) {
                    console.log("dir getFilesAndDirectories", dir)
                    return dir
                  })
              })
            }, Promise.resolve())
            .catch(function(err) {
              console.log(err, err.message)
            })
            .then(function(items) {
              console.log("items", items);
              var dir = items.filter(function(folder) {
                return folder instanceof Directory
              });
              var files = items.filter(function(file) {
                return file instanceof File
              });
              if (files.length) {
                console.log("files:", files, path);
                mozResult = mozResult.concat.apply(mozResult, files);

              }
              if (dir.length) {
                console.log(dir, dir[0] instanceof Directory, dir[0]);
                return mozReadDirectories(dir, dir[0].path || path);

              } else {
                if (!dir.length) {

                  return Promise.resolve(mozResult).then(function(complete) {
                    return complete
                  })

                }
              }

            })
            .catch(function(err) {
              console.log(err)
            })

        };

        console.log("files", event.target.files);
        if ("getFilesAndDirectories" in event.target) {
          return (event.type === "drop" ? event.dataTransfer : event.target)
          .getFilesAndDirectories()
            .then(function(dir) {
              if (dir[0] instanceof Directory) {
                console.log(dir)
                return mozReadDirectories(dir, dir[0].path || path)
                  .then(function(complete) {
                    console.log("complete:", complete);
                    event.target.value = null;
                  });
              } else {
                if (dir[0] instanceof File && dir[0].size > 0) {
                  return Promise.resolve(dir)
                    .then(function(complete) {
                      console.log("complete:", complete);
                    })
                } else {
                  if (dir[0].size == 0) {
                    throw new Error("could not process '" + dir[0].name + "' directory" + " at drop event at firefox, upload folders at 'Choose folder...' input");
                  }
                }
              }
            }).catch(function(err) {
              console.log(err)
            })
        }

        var reader = new FileReader();
        reader.onload = function(e) {
          text = reader.result;
          console.log("FileReader.result", text);
          button.removeAttribute("disabled");
        }

        reader.onerror = function(err) {
          console.log(err, err.loaded, err.loaded === 0, file);
          button.removeAttribute("disabled");
        }

        reader.onprogress = function(e) {
          console.log(e, e.lengthComputable, e.loaded, e.total);
        }

        reader.readAsArrayBuffer(file);

      }

      function handleText() {

        // do stuff with `text`: `reader.result` from `addDoc`
        display.textContent = text;
        button.setAttribute("disabled", "disabled");
        // set `text` to `null` if not needed or referenced again
        text = null;
      }
    }
  </script>
</head>

<body>
  <input type="file" id="myfile" webkitdirectory directory allowdirs>
  <button type="button" disabled>Add Document</button>
  <br>
  <br>
  <textarea id="DisplayText"></textarea>
</body>

</html>
</code></pre><p>plnkr http://plnkr.co/edit/8Ovw3IlYKI8BYsLhzV88?p=preview</p>

<hr>

<p>You can use <code>change</code> event attached to <code>#myfile</code> element to handle file selection action by user. </p>

<p>Substitute <code><textarea></code> element for <code><p></code> element to display result of <code>load</code> event from <code>.readAsText()</code> call.</p>

<p>To display <code>.result</code> of <code>FileReader</code> at <code>click</code> at <code>button</code> element, set variable <code>text</code> to <code>reader.result</code> within <code>load</code> event of <code>FileReader</code> at <code>click</code> event at <code>button</code> set <code>.textContent</code> of <code>#DisplayText</code> element to variable referencing previously set <code>reader.result</code>.</p>

<p></p>
</p>
</p><pre class="snippet-code-html lang-html prettyprint-override"><code><!DOCTYPE html>
<html>
  <style>
    body {
      height: 400px;
    }
    textarea {
      width:95%;
      height: inherit;
    }
  </style>
<head>
  <script>
    window.onload = function() {
        var button = document.querySelector("#myfile + button");
        var input = document.getElementById("myfile");
        var display = document.getElementById("DisplayText");
        var text = null;
        input.addEventListener("change", addDoc);
        button.addEventListener("click", handleText)

        function addDoc(event) {
          var file = this.files[0]
          var reader = new FileReader();      
          reader.onload = function(e) {
            text = reader.result;
            button.removeAttribute("disabled");
          }

          reader.onerror = function(err) {
            console.log(err, err.loaded
                        , err.loaded === 0
                        , file);
            button.removeAttribute("disabled");
          }

          reader.readAsText(event.target.files[0]);
        }

        function handleText() {
          
          // do stuff with `text`: `reader.result` from `addDoc`
          display.textContent = text;
          button.setAttribute("disabled", "disabled");
          // set `text` to `null` if not needed or referenced again
          text = null; 
        }
    }
  </script>
</head>

<body>
  <input type="file" id="myfile" accept="text/*">
  <button type="button" disabled>Add Document</button><br><br>
  <textarea id="DisplayText"></textarea>
</body>

</html></code></pre><p>
<p>
<p>
</p>

                        				
	</div>
	<div class="">
		<p><strong>相关文章</strong></p>
			</div>
</article>		</div>
	</main>
	<footer>
		<div class="container">
			<p>
				<span>友情链接：</span>
				<a href="https://www.688576.com" target="_blank">雨伦博客</a>  
				<a href="https://www.yaanbbs.net" target="_blank">雅安论坛</a>
			</p>
			<a href="https://beian.miit.gov.cn" target="_blank">京ICP备15023317号-6</a>
		</div>
	</footer>
	<script>
	var _hmt = _hmt || [];
	(function() {
	  var hm = document.createElement("script");
	  hm.src = "https://hm.baidu.com/hm.js?30b42218aa13759c43de5f1971d0a93b";
	  var s = document.getElementsByTagName("script")[0]; 
	  s.parentNode.insertBefore(hm, s);
	})();
	</script>
</body>
</html>