Html5 本地檔案讀取 API 研究使用過程中的意外發現 - MDN
<a target="_blank" href="http://blog.csdn.net/opengl_es">轉載請保留此句：太陽火神的美麗人生 - 本部落格專注于 靈活開發及移動和物聯裝置研究：iOS、Android、Html5、Arduino、pcDuino，否則，出自本部落格的文章拒絕轉載或再轉載，謝謝合作。</a>
補充：
終于可以讀出肉的眼能看懂的人類文字了！！！
經在 safari 7.0.4(9537.76.4) 測試，即使關閉 WebGL 支援，File API 仍可正常讀取本地文本檔案内容。
下面 FileReader 的文檔估計時間會稍微久遠一些，不過按其描述，确實準确解讀了火星語，我們地球人終于全都知道了。
接下來，語言通了，知道說的是啥了，開始貿易吧，還得繼續遵循貿易規則，更得尊重當地的風俗習慣，來特俺們夠！
說是原創，實際是資料搜集過程中的一個記錄，從這個角度也算是原創吧！
至于内容，那可是 MDN 的原創，俺這裡隻能算借花獻佛，非俺原創，本想翻譯，後發現俺中意的内容有中文版，這也說明 MDN 對中國開發者的重視，不過也可能是我們中國開發者做的貢獻，這個确實不清楚。
來個幹脆的，把關注的整個頁面全撈過來，也算做一個資源目錄吧，詳細的部分，真的太多了。
不過我想研究的是 FileReader 的檔案加載過程及響應事件，異步處理嘛，肯定要有個開始與結束，面向對象的 JS ，俺确實不太熟，但用面向對象的思想來圈一圈它，還是跑不出範圍的，是以，知道加速度的變化，對速度的把控，那确實是淋漓盡緻！
至于俺要研究的部分，那可是本篇的核心内容，從此處算是比較權威的來源證明，Opera、Safari 還不支援這些個 API，不知這是否會成為本次研究的一個終結，還是别亂猜了，稍侯請示一下，會有結果，這個不必費心，有些時侯有些事情，确實不是我們能做得了主的，那麼盡量全面的了解情況，分析整理後，提供多套可行方案和處理思路，呈報上去，自會有需要我們做的下一步工作，而至于如何選，怎麼選，這個我們提供分析結果就可以了，至于最終結論，隻要遵照行事即可，畢竟我們站的高度還看不到那些我們看不到的事情：
FileReader
<a target="_blank" href="https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader#Methods">方法</a>
<a target="_blank" href="https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader#.E6.B5.8F.E8.A7.88.E5.99.A8.E5.85.BC.E5.AE.B9.E6.80.A7">浏覽器相容性</a>
想要建立一個<code>FileReader對象,</code>很簡單,如下:
常量名
值
描述
<code>EMPTY</code>
<code>0</code>
還沒有加載任何資料.
<code>LOADING</code>
<code>1</code>
資料正在被加載.
<code>DONE</code>
<code>2</code>
已完成全部的讀取請求.
屬性名
類型
<code>error</code>
<a target="_blank" href="https://developer.mozilla.org/zh-CN/docs/DOM/DOMError"><code>DOMError</code></a>
在讀取檔案時發生的錯誤. 隻讀.
<code>readyState</code>
<code>result</code>
讀取到的檔案内容.這個屬性隻在讀取操作完成之後才有效,并且資料的格式取決于讀取操作是由哪個方法發起的. 隻讀.
中止該讀取操作.在傳回時,<code>readyState</code>屬性的值為<code>DONE</code>.
參數
無.
抛出的異常
<dl></dl>
<dt><code>DOM_FILE_ABORT_ERR</code></dt>
<dd>當該FileReader對象沒有在進行讀取操作時(也就是readyState屬性的值不為<code>LOADING</code>時),調用<code>abort()方法會抛出該異常</code>.</dd>
Note: 實作于Gecko 6.0.
Requires Gecko 7.0 (Firefox 7.0 / Thunderbird 7.0 / SeaMonkey 2.4)
<dt><code>blob</code></dt>
<dt><code>file</code></dt>
例子
<dt></dt>
<code>encoding</code> 可選
<dd>一個字元串,表示了傳回資料所使用的編碼.如果不指定,預設為UTF-8.</dd>
<dt><code>onabort</code></dt>
<dd>當讀取操作被終止時調用.</dd>
<dt><code>onerror</code></dt>
<dd>當讀取操作發生錯誤時調用.</dd>
<dt><code>onload</code></dt>
<dd>當讀取操作成功完成時調用.</dd>
<dt><code>onloadend</code></dt>
<dd>當讀取操作完成時調用,不管是成功還是失敗.該處理程式在<code>onload</code>或者<code>onerror之後調用</code>.</dd>
<dt><code>onloadstart</code></dt>
<dd>當讀取操作将要開始之前調用.</dd>
<dt><code>onprogress</code></dt>
<dd>在讀取資料過程中周期性調用.</dd>
<a target="_blank"></a>
<a target="_blank">Mobile</a>
Feature
Firefox (Gecko)
Chrome
Internet Explorer*
Opera*
Safari
Basic support
7
10
Not supported
<a target="_blank" href="https://developer.mozilla.org/zh-CN/Using_files_from_web_applications">如何在web應用程式中使用檔案</a>
<a target="_blank" href="https://developer.mozilla.org/zh-CN/docs/DOM/File"><code>File</code></a>
檔案
大小
日期
附加者為
<a target="_blank" href="https://mdn.mozillademos.org/files/3698/image_upload_preview.html">image_upload_preview.html</a>
2235 位元組
2012-05-08 17:16:34
<a target="_blank" href="https://developer.mozilla.org/zh-CN/profiles/fusionchess">fusionchess</a>
<a target="_blank" href="https://mdn.mozillademos.org/files/3699/crossbrowser_image_preview.html">crossbrowser_image_preview.html</a>
2021 位元組
2012-05-08 20:50:14
<a target="_blank" href="https://mdn.mozillademos.org/files/6231/podcasts1.jpg">Podcasts example screenshot</a>
19864 位元組
2013-09-27 06:42:04
<a target="_blank" href="https://developer.mozilla.org/zh-CN/profiles/chrisdavidmills">chrisdavidmills</a>
© 2005-2014 Mozilla 開發者網絡和獨立貢獻者
我倒覺得，下面的 Web 開發人員文檔 ，應該從下往上看才是由淺入深；
開放的Web為開發者提供難以置信的機會。為了充分利用這些技術，你需要知道怎麼使用它們。您在下面可以找到與我們相關的Web技術文檔的連結。
<dd>所參考的 Web 開發文檔包括HTML，CSS等。</dd>
<dd>網絡開發指南提供了有用的内容，以幫助你實際地來使用網絡技術做那些你想去做或者需要你去做的事情。</dd>
<dd>A list of tutorials to take you step-by-step through learning APIs, technologies, or broad topic areas.</dd>
<dd>Documentation for Web application developers; Web apps are true write-once, deploy anywhere apps for mobile, desktop, and Firefox OS.</dd>
<a target="_blank" href="https://developer.mozilla.org/zh-CN/docs/tag/Web">View All...</a>
<dd>Reference material for each of the interfaces that comprise the Web's APIs, including the DOM and all of the related APIs and interfaces you can use to build Web content and apps.</dd>
<dd>HyperText Markup Language is the language used to describe and define the content of a Web page.</dd>
<dd>Cascading Style Sheets are used to describe the appearance of Web content.</dd>
<dd>Scalable Vector Graphics let you describe images as sets of vectors and shapes in order to allow them to scale smoothly regardless of the size at which they're drawn.</dd>
<dd>The Mathematical Markup Language makes it possible to display complex mathematical equations and syntax.</dd>
The stuff below here is temporary to help keep track of things while organization work is ongoing. Pay it no mind.
<a target="_blank" href="https://developer.mozilla.org/zh-CN/docs/Web/Accessibility">Accessibility</a>
<a target="_blank" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS">CSS</a>
<a target="_blank" href="https://developer.mozilla.org/zh-CN/docs/Web/HTML">HTML</a>
<a target="_blank" href="https://developer.mozilla.org/zh-CN/docs/JavaScript">JavaScript</a>
<a target="_blank" href="https://developer.mozilla.org/zh-CN/docs/Web/MathML">MathML</a>
<a target="_blank" href="https://developer.mozilla.org/zh-CN/docs/Web/SVG">SVG</a>
<a target="_blank" href="https://developer.mozilla.org/zh-CN/docs/Web/Reference">Web technology reference</a>
<a target="_blank" href="https://developer.mozilla.org/zh-CN/docs/Web/Guide">Web 開發者指南</a>
<a target="_blank" href="https://developer.mozilla.org/zh-CN/docs/WebAPI">WebAPI</a>
<a target="_blank" href="https://developer.mozilla.org/zh-CN/docs/Web/Tutorials">教程</a>
标簽：
<a target="_blank" href="https://developer.mozilla.org/zh-CN/docs/tag/TopicStub">TopicStub</a>
<a target="_blank" href="https://developer.mozilla.org/zh-CN/docs/tag/Web">Web</a>
<a target="_blank" href="https://developer.mozilla.org/zh-CN/docs/tag/NeedsTranslation">NeedsTranslation</a>
<a target="_blank" href="https://developer.mozilla.org/zh-CN/docs/tag/Landing">Landing</a>
![測試工程師面試解析～[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)