HTML5 File API 中的 FileReader.readAsText 如何工作? [英] How FileReader.readAsText in HTML5 File API works?

查看：16 发布时间：2022/1/11 20:23:16 javascript html drag-and-drop textarea fileapi

本文介绍了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 使用 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><a href="https://w3c.github.io/html/sec-forms.html#file-upload-state-typefile" rel="noreferrer">4.10.5.1.18.文件上传状态(<code>type=file</code>)</a></p><块引用><p><a href="https://w3c.github.io/html/sec-forms.html#example-8eea6b94" rel="noreferrer">示例 16</a></p><p>由于历史原因，<a href="https://w3c.github.io/html/sec-forms.html#dom-htmlinputelement-value" rel="noreferrer"><code>value</code></a> IDL 属性前缀带有字符串<code>C:fakepath</code>"的文件名.一些旧版用户代理实际上包括完整路径(这是一个安全漏洞).因此，从 <code>value</code> IDL 获取文件名向后兼容的属性是不平凡的.</p></blockquote><p></p><p><a href="https://w3c.github.io/html/sec-forms.html#common-input-element-apis" rel="noreferrer">4.10.5.4.常见的 <code><input></code> 元素 API</a></p><块引用><p><em><strong>文件名</strong></em> </p><p>在获取时，它必须返回字符串C:fakepath"，后跟 <a href="https://w3c.github.io/html/sec-forms 列表中的第一个文件的名称.html#selected-files" rel="noreferrer"><code>已选择文件</code></a>，如果有的话，或者如果列表为空，则为空字符串.在设置，如果新值是空字符串，它必须清空列表<code>选定文件</code>；否则，它必须抛出<code>InvalidStateError</code>"<code>DOMException</code>.</p><块引用><p><strong>注意:</strong>这种虚假路径"要求是历史的不幸事故.请参阅 <a href="https://w3c.github.io/html/sec-forms.html#element-statedef-input-file-upload" rel="noreferrer">文件上传</a> 中的示例状态部分了解更多信息.</p><p><strong>注意:</strong>由于<code>选择文件</code>列表中的文件名中不允许出现<code>路径组件</code>，因此<code>fakepath</code>" 不会弄错的用于路径组件.</p></blockquote><p></blockquote><p></p><p><a href="https://w3c.github.io/html/sec-forms.html#file-upload-state-typefile" rel="noreferrer">4.10.5.1.18.文件上传状态(<code>type=file</code>)</a></p><p><strong><h2>路径组件</h2></strong></p><块引用><p>当 <code><input></code> 元素的 <code>type</code> 属性在 <code>File Upload</code> 中时声明，本节中的规则适用.</p><p><code><input></code> 元素 <a href="https://w3c.github.io/html/dom.html#represent" rel="noreferrer"><code>表示</code></a> <code>选定文件</code>的列表，每个文件由文件名、文件类型和文件主体(文件的内容).</p><p>文件名不得包含 <a href="https://w3c.github.io/html/sec-forms.html#path-components" rel="noreferrer"><code>路径组件</code></a>，即使在 a用户选择了整个目录层次结构或多个文件来自不同目录的相同名称.<strong>路径组件</strong>，用于<code>File Upload</code> 状态的目的是文件名的那些部分由 U+005C REVERSE SOLIDUS 字符 () 字符分隔.</p></blockquote><p>错误报告 <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1311823" rel="noreferrer">https://bugzilla.mozilla.org/show_bug.cgi?id=1311823</a></p><小时><h3>在 <textarea> 放置文件在数据 URI 处</h3><p><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1311823#c13" rel="noreferrer">Neal Deakin</a> 在错误报告中发表评论</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 <a href="http://plnkr.co/edit/ZfAGEAiyLLq8rGXD2ShE?p=preview" rel="noreferrer">http://plnkr.co/edit/ZfAGEAiyLLq8rGXD2ShE?p=preview</a></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 <a href="http://plnkr.co/edit/8Ovw3IlYKI8BYsLhzV88?p=preview" rel="noreferrer">http://plnkr.co/edit/8Ovw3IlYKI8BYsLhzV88?p=preview</a></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><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false"></p><div class="snippet-code"></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></div><p></div><p></p><p>I wrote the following code to check whether the uploaded file exists or not using HTML5 file API.</p>

<p></p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
</p><div class="snippet-code">
</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>
</div><p>
</div><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 <em>Filereader</em> works? Is it that the <em>FileReader</em> gets bound as soon as the file is browsed?</p>

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

<p>Could someone suggest on this? I have IE11 to test the code.</p><div class="h2_lin"> 解决方案 </div><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 <a href="http://w3c.github.io/html/infrastructure.html#section-transferable-objects" rel="noreferrer">2.9.2. Transferable objects</a>, <a href="https://html.spec.whatwg.org/multipage/interaction.html#the-datatransfer-interface" rel="noreferrer">6.7.3 The DataTransfer interface</a>.</p><blockquote>
  <p><a href="https://w3c.github.io/FileAPI/#blob" rel="noreferrer">4. The Blob Interface and Binary Data</a></p>
  
  <p>Each <a href="https://w3c.github.io/FileAPI/#dfn-Blob" rel="noreferrer"><code>Blob</code></a> must have an internal <em><strong>snapshot state</strong></em>, which
  must be initially set to the state of the underlying storage, if any
  such underlying storage exists, and must be preserved through
  <a href="https://html.spec.whatwg.org/multipage/infrastructure.html#structured-clone" rel="noreferrer"><code>structured clone</code></a>. Further normative definition of <a href="https://w3c.github.io/FileAPI/#snapshot-state" rel="noreferrer"><code>snapshot state</code></a> can be found for <a href="https://w3c.github.io/FileAPI/#dfn-file" rel="noreferrer"><code>File</code></a>s.</p>
</blockquote><p></p><blockquote>
  <p><a href="https://html.spec.whatwg.org/multipage/infrastructure.html#monkey-patch-for-blob-and-filelist-objects" rel="noreferrer">2.9.8 Monkey patch for Blob and FileList objects</a></p>
  
  <p>This monkey patch will be removed in due course. See <a href="https://github.com/w3c/FileAPI/issues/32" rel="noreferrer">w3c/FileAPI
  issue 32</a>.</p>
  
  <p><code>Blob</code> objects are <a href="https://html.spec.whatwg.org/multipage/infrastructure.html#cloneable-objects" rel="noreferrer"><code>cloneable objects</code></a>.</p><ol>
  <li><p>Each <code>Blob</code> object's [[<a href="https://html.spec.whatwg.org/multipage/infrastructure.html#clone" rel="noreferrer"><code>Clone</code></a>]] internal method, given targetRealm and ignoring memory, must run these steps:</p></li>
  <li><p>If this is <a href="https://w3c.github.io/FileAPI/#closed" rel="noreferrer"><code>closed</code></a>, then throw a <a href="https://heycam.github.io/webidl/#datacloneerror" rel="noreferrer"><code>"DataCloneError"</code></a> <a href="https://heycam.github.io/webidl/#dfn-DOMException" rel="noreferrer"><code>DOMException</code></a>.</p></li>
  </ol><p>Return a new instance of <strong>this</strong> in <em>targetRealm</em>, corresponding to
  the same underlying data.</p>
  
  <p><a href="https://w3c.github.io/FileAPI/#filelist-section" rel="noreferrer"><code>FileList</code></a> objects are <a href="https://html.spec.whatwg.org/multipage/infrastructure.html#cloneable-objects" rel="noreferrer">cloneable objects</a>.</p>
  
  <p>Each <code>FileList</code> object's <code>[[Clone]]</code> internal method, given
  <em>targetRealm</em> and <em>memory</em>, must run these steps:</p><ol>
  <li><p>Let <em>output</em> be a new <code>FileList</code> object in <em>targetRealm</em>.</p></li>
  <li><p>For each <em>file</em> in <strong>this</strong>, add ? <code>[StructuredClone][15](_file, targetRealm, memory_)</code> to the end of the list of <a href="https://w3c.github.io/FileAPI/#file" rel="noreferrer"><code>File</code></a> objects
  of <em>output</em>.</p></li>
  </ol><p>Return <em>output</em>.</p>
</blockquote><p>

<hr>

<p><strong><h1>Selecting read-only files or folders at webkit and firefox browsers</h1></strong></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><strong><h2>Selection of folder where folder permission is set to read-only</h2></strong></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><strong><h1>Bug, security issue</h1></strong></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><a href="https://w3c.github.io/html/sec-forms.html#file-upload-state-typefile" rel="noreferrer">4.10.5.1.18. File Upload state (<code>type=file</code>)</a></p><blockquote>
  <p><a href="https://w3c.github.io/html/sec-forms.html#example-8eea6b94" rel="noreferrer">EXAMPLE 16</a></p>
  
  <p>For historical reasons, the <a href="https://w3c.github.io/html/sec-forms.html#dom-htmlinputelement-value" rel="noreferrer"><code>value</code></a> 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><a href="https://w3c.github.io/html/sec-forms.html#common-input-element-apis" rel="noreferrer">4.10.5.4. Common <code><input></code> element APIs</a></p><blockquote>
  <p><em><strong>filename</strong></em> </p>
  
  <p>On getting, it must return the string "C:fakepath" followed by the name of the first file in the list of <a href="https://w3c.github.io/html/sec-forms.html#selected-files" rel="noreferrer"><code>selected
  files</code></a>, 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><strong>NOTE:</strong> This "fakepath" requirement is a sad accident of history. See the example in the <a href="https://w3c.github.io/html/sec-forms.html#element-statedef-input-file-upload" rel="noreferrer">File Upload</a> state section for more
    information.</p>
    
    <p><strong>NOTE:</strong> 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><a href="https://w3c.github.io/html/sec-forms.html#file-upload-state-typefile" rel="noreferrer">4.10.5.1.18. File Upload state (<code>type=file</code>)</a></p>

<p><strong><h2>Path components</h2></strong></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 <a href="https://w3c.github.io/html/dom.html#represent" rel="noreferrer"><code>represents</code></a> 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 <a href="https://w3c.github.io/html/sec-forms.html#path-components" rel="noreferrer"><code>path components</code></a>, even in the case that a
  user has selected an entire directory hierarchy or multiple files with
  the same name from different directories. <strong>Path components</strong>, 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 <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1311823" rel="noreferrer">https://bugzilla.mozilla.org/show_bug.cgi?id=1311823</a></p>

<hr>

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

<p>Following comment by <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1311823#c13" rel="noreferrer">Neal Deakin</a> 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 <a href="http://plnkr.co/edit/ZfAGEAiyLLq8rGXD2ShE?p=preview" rel="noreferrer">http://plnkr.co/edit/ZfAGEAiyLLq8rGXD2ShE?p=preview</a></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 <a href="http://plnkr.co/edit/8Ovw3IlYKI8BYsLhzV88?p=preview" rel="noreferrer">http://plnkr.co/edit/8Ovw3IlYKI8BYsLhzV88?p=preview</a></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><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
</p><div class="snippet-code">
</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>
</div><p>
</div><p>
</p>

                        <p>这篇关于HTML5 File API 中的 FileReader.readAsText 如何工作?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！</p>
                        
                    </div>
                    <div class="arc-body-main-more">
                        <span onclick="unlockarc('2803116');">查看全文</span>
                    </div>
                </div>
				<div>
                            
                        </div>
                <div class="wwads-cn wwads-horizontal" data-id="166" style="max-width:100%;border: 4px solid #666;"></div>
            </div>
        </article>
        <div id="arc-ad-2" class="mb-1">
            <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5038752844014834"
     crossorigin="anonymous"></script>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-format="autorelaxed"
     data-ad-client="ca-pub-5038752844014834"
     data-ad-slot="3921941283"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

        </div>
        <div class="widget bgwhite radius-1 mb-1 shadow widget-rel">
            <h5>相关文章</h5>
            <ul>
                    <li>
                        <a target="_blank" title="HTML5 File API中的FileReader.readAsText如何工作？" href="/655725.html">
                            HTML5 File API中的FileReader.readAsText如何工作？;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="HTML5 File API：在FileReader回调中获取File对象" href="/881265.html">
                            HTML5 File API：在FileReader回调中获取File对象;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="HTML5文件API：如何查看readAsText（）的结果" href="/881253.html">
                            HTML5文件API：如何查看readAsText（）的结果;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="HTML5 FileReader的问题" href="/2079868.html">
                            HTML5 FileReader的问题;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="测试&amp;反馈FireFox加载项：错误：FileReader.readAsText的参数1不是对象。" href="/1294134.html">
                            测试&amp;反馈FireFox加载项：错误：FileReader.readAsText的参数1不是对象。;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="HTML5 FileReader如何返回结果？" href="/880899.html">
                            HTML5 FileReader如何返回结果？;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="HTML5 FileReader替代方案" href="/880930.html">
                            HTML5 FileReader替代方案;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="HTML5 File API修改file.name" href="/871139.html">
                            HTML5 File API修改file.name;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="FileReader readAsText（）异步问题？" href="/1107003.html">
                            FileReader readAsText（）异步问题？;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="HTML5 Geolocation API如何工作？" href="/884336.html">
                            HTML5 Geolocation API如何工作？;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="HTML5 FileReader API中的readAsBinaryString()和readAsDataURL()之间的区别" href="/2079856.html">
                            HTML5 FileReader API中的readAsBinaryString()和readAsDataURL()之间的区别;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="javascript - html5的filereader读取txt" href="/736005.html">
                            javascript - html5的filereader读取txt;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="HTML5，File API和jQuery发布图片" href="/883178.html">
                            HTML5，File API和jQuery发布图片;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="HTML5 File API and AJAX Upload Chunking question" href="/2962830.html">
                            HTML5 File API and AJAX Upload Chunking question;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="FileReader HTML 5 API的Flash备用" href="/763373.html">
                            FileReader HTML 5 API的Flash备用;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="是否在Angular中检查HTML5 File API支持?" href="/1802991.html">
                            是否在Angular中检查HTML5 File API支持?;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="HTML5 File API简单检查文件是否存在" href="/881813.html">
                            HTML5 File API简单检查文件是否存在;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="HTML5中的localStorage如何工作？" href="/1091406.html">
                            HTML5中的localStorage如何工作？;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="HTML5 localstorage如何工作？" href="/883124.html">
                            HTML5 localstorage如何工作？;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="如何从Canvas上的HTML5 File API中绘制图像？" href="/884503.html">
                            如何从Canvas上的HTML5 File API中绘制图像？;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="IE9会支持HTML5 File API吗？" href="/880851.html">
                            IE9会支持HTML5 File API吗？;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="使用HTML5 File API检查文件是否已更改" href="/881076.html">
                            使用HTML5 File API检查文件是否已更改;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="FileReader HTML 5 API 的 Flash 替代品" href="/2693403.html">
                            FileReader HTML 5 API 的 Flash 替代品;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="HTML5的历史APi" href="/868517.html">
                            HTML5的历史APi;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="如何获得HTML5的window.fileReader API的跨浏览器兼容性" href="/881637.html">
                            如何获得HTML5的window.fileReader API的跨浏览器兼容性;
                        </a>
                    </li>
            </ul>
        </div>
        <div class="mb-1">
            <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5038752844014834"
     crossorigin="anonymous"></script>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-format="autorelaxed"
     data-ad-client="ca-pub-5038752844014834"
     data-ad-slot="3921941283"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

        </div>
    </div>
    <div class="side">
        <div class="widget widget-side bgwhite mb-1 shadow">
            <h5>前端开发最新文章</h5>
            <ul>
                    <li>
                        <a target="_blank" title="为什么Chrome（在Electron内部）突然重定向到chrome-error：// chromewebdata？" href="/1996151.html">
                            为什么Chrome（在Electron内部）突然重定向到chrome-error：// chromewebdata？;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="错误102（net :: ERR_CONNECTION_REFUSED）：服务器拒绝连接" href="/749568.html">
                            错误102（net :: ERR_CONNECTION_REFUSED）：服务器拒绝连接;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="如何解决'重定向已被CORS策略阻止：没有'Access-Control-Allow-Origin'标题'？" href="/1009885.html">
                            如何解决'重定向已被CORS策略阻止：没有'Access-Control-Allow-Origin'标题'？;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="如何处理“Uncaught（in promise）DOMException：play（）失败，因为用户没有首先与文档交互。”在桌面上使用Chrome 66？" href="/884909.html">
                            如何处理“Uncaught（in promise）DOMException：play（）失败，因为用户没有首先与文档交互。”在桌面上使用Chrome 66？;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="警告：添加非被动事件侦听器到滚动阻塞'touchstart'事件" href="/818517.html">
                            警告：添加非被动事件侦听器到滚动阻塞'touchstart'事件;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="如何在浏览器中播放.TS文件（视频/ MP2T媒体类型）？" href="/343346.html">
                            如何在浏览器中播放.TS文件（视频/ MP2T媒体类型）？;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="此请求已被阻止;内容必须通过HTTPS提供" href="/886417.html">
                            此请求已被阻止;内容必须通过HTTPS提供;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="资源解释为样式表，但转换为MIME类型text / html（似乎与web服务器无关）" href="/562873.html">
                            资源解释为样式表，但转换为MIME类型text / html（似乎与web服务器无关）;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="通过HTTPS加载页面但请求不安全的XMLHttpRequest端点" href="/885901.html">
                            通过HTTPS加载页面但请求不安全的XMLHttpRequest端点;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="拒绝从执行脚本'*'，因为它的MIME类型（“应用/ JSON'）不是可执行文件，并严格MIME类型检查被启用。" href="/47347.html">
                            拒绝从执行脚本'*'，因为它的MIME类型（“应用/ JSON'）不是可执行文件，并严格MIME类型检查被启用。;
                        </a>
                    </li>
            </ul>
        </div>
        <div class="widget widget-side bgwhite mb-1 shadow">
            <h5>
                热门教程
            </h5>
            <ul>
                <li>
                    <a target="_blank" title="Java教程" href="/OnLineTutorial/java/index.html">
                        Java教程
                    </a>
                </li>
                <li>
                    <a target="_blank" title="Apache ANT 教程" href="/OnLineTutorial/ant/index.html">
                        Apache ANT 教程
                    </a>
                </li>
                <li>
                    <a target="_blank" title="Kali Linux教程" href="/OnLineTutorial/kali_linux/index.html">
                        Kali Linux教程
                    </a>
                </li>
                <li>
                    <a target="_blank" title="JavaScript教程" href="/OnLineTutorial/javascript/index.html">
                        JavaScript教程
                    </a>
                </li>
                <li>
                    <a target="_blank" title="JavaFx教程" href="/OnLineTutorial/javafx/index.html">
                        JavaFx教程
                    </a>
                </li>
                <li>
                    <a target="_blank" title="MFC 教程" href="/OnLineTutorial/mfc/index.html">
                        MFC 教程
                    </a>
                </li>
                <li>
                    <a target="_blank" title="Apache HTTP客户端教程" href="/OnLineTutorial/apache_httpclient/index.html">
                        Apache HTTP客户端教程
                    </a>
                </li>
                <li>
                    <a target="_blank" title="Microsoft Visio 教程" href="/OnLineTutorial/microsoft_visio/index.html">
                        Microsoft Visio 教程
                    </a>
                </li>
            </ul>
        </div>
        <div class="widget widget-side bgwhite mb-1 shadow">
            <h5>
                热门工具
            </h5>
            <ul>
                
                <li>
                    <a target="_blank" title="Java 在线工具" href="/Onlinetools/details/4">
                        Java 在线工具
                    </a>
                </li>
                <li>
                    <a target="_blank" title="C(GCC) 在线工具" href="/Onlinetools/details/6">
                        C(GCC) 在线工具
                    </a>
                </li>
                <li>
                    <a target="_blank" title="PHP 在线工具" href="/Onlinetools/details/8">
                        PHP 在线工具
                    </a>
                </li>
                <li>
                    <a target="_blank" title="C# 在线工具" href="/Onlinetools/details/1">
                        C# 在线工具
                    </a>
                </li>
                <li>
                    <a target="_blank" title="Python 在线工具" href="/Onlinetools/details/5">
                        Python 在线工具
                    </a>
                </li>
                <li>
                    <a target="_blank" title="MySQL 在线工具" href="/Onlinetools/Dbdetails/33">
                        MySQL 在线工具
                    </a>
                </li>
                <li>
                    <a target="_blank" title="VB.NET 在线工具" href="/Onlinetools/details/2">
                        VB.NET 在线工具
                    </a>
                </li>
                <li>
                    <a target="_blank" title="Lua 在线工具" href="/Onlinetools/details/14">
                        Lua 在线工具
                    </a>
                </li>
                <li>
                    <a target="_blank" title="Oracle 在线工具" href="/Onlinetools/Dbdetails/35">
                        Oracle 在线工具
                    </a>
                </li>
                <li>
                    <a target="_blank" title="C++(GCC) 在线工具" href="/Onlinetools/details/7">
                        C++(GCC) 在线工具
                    </a>
                </li>
                <li>
                    <a target="_blank" title="Go 在线工具" href="/Onlinetools/details/20">
                        Go 在线工具
                    </a>
                </li>
                <li>
                    <a target="_blank" title="Fortran 在线工具" href="/Onlinetools/details/45">
                        Fortran 在线工具
                    </a>
                </li>
            </ul>
        </div>
        
    </div>
</div>
<script type="text/javascript">var eskeys = 'html5,file,api,中,的,filereader.readastext,如何,工作'; var cat = 'cc';';//qianduan</script>
    </div>
<div id="pop" onclick="pophide();">
    <div id="pop_body" onclick="event.stopPropagation();">
        <h6 class="flex flex101">
            登录
            <span onclick="pophide();">关闭</span>
        </h6>
        <div class="pd-1">
            <div class="wxtip center">
                <span>扫码关注<em>1秒</em>登录</span>
            </div>
            <div class="center">
                <img id="qr" src="https://huajiakeji.com/Content/Images/qrydx.jpg" alt="" style="width:150px;height:150px;" />
            </div>
            <div style="margin-top:10px;display:flex;justify-content: center;">
                <input type="text" placeholder="输入验证码" id="txtcode" autocomplete="off" />
                <input id="btngo" type="button" onclick="chk()" value="GO" />
            </div>
            <div class="center" style="margin: 4px; font-size: .8rem; color: #f60;">
                发送“验证码”获取
                <em style="padding: 0 .5rem;">|</em>
                <span style="color: #01a05c;">15天全站免登陆</span>
            </div>
            <div id="chkinfo" class="tip"></div>
        </div>
    </div>
</div>    <script type="text/javascript" src="https://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<script type="text/javascript" src="https://img01.yuandaxia.cn/Scripts/highlight.min.js"></script>
<script type="text/javascript" src="https://img01.yuandaxia.cn/Scripts/base.js?v=0.22"></script>
<script type="text/javascript" src="https://img01.yuandaxia.cn/Scripts/tui.js?v=0.11"></script>
<footer class="footer">
    <div class="container">
		<div class="flink mb-1">
			友情链接：
            <a href="https://www.it1352.com/" target="_blank">IT屋</a>
            <a href="https://huajiakeji.com/" target="_blank">Chrome插件</a>
            <a href="https://www.cnplugins.com/" target="_blank">谷歌浏览器插件</a>
        </div>
        <section class="copyright-section">
            <a href="https://www.it1352.com" title="IT屋-程序员软件开发技术分享社区">IT屋</a>
            ©2016-2022 <a href="http://www.beian.miit.gov.cn/" target="_blank">琼ICP备2021000895号-1</a>
            <a href="/sitemap.html" target="_blank" title="站点地图">站点地图</a>
            <a href="/Home/Tags" target="_blank" title="站点标签">站点标签</a>
            <a target="_blank" alt="sitemap" href="/sitemap.xml">SiteMap</a>
            <a href="/1155981.html" title="IT屋-免责申明"><免责申明></a>
            本站内容来源互联网,如果侵犯您的权益请联系我们删除.
        </section>
        
<!--统计代码-->
<script type="text/javascript">
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "https://hm.baidu.com/hm.js?0c3a090f7b3c4ad458ac1296cb5cc779";
      var s = document.getElementsByTagName("script")[0]; 
      s.parentNode.insertBefore(hm, s);
    })();
</script>
<script type="text/javascript">
    (function () {
        var bp = document.createElement('script');
        var curProtocol = window.location.protocol.split(':')[0];
        if (curProtocol === 'https') {
            bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
        }
        else {
            bp.src = 'http://push.zhanzhang.baidu.com/push.js';
        }
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(bp, s);
    })();
</script>
    </div>
</footer>
</body>
</html>