在用戶端直接預覽上傳的圖片-- 使用FileReader API

有無支援FileReader API, 皆需實現這功能的相關文章:

http://cyfangnotepad.blogspot.tw/2013/08/javascript-filereader.html

http://www.cnblogs.com/tugenhua0707/p/4605593.html

擷取該篇文章的語法整理如下(其實整篇都可看看):

-->  FileReader對像有5種方法，其中四種用於讀取文件，另一種用來讀取過程中斷，需要注意的是：無論讀取成功與失敗，方法並不會返回讀取結果，而是將結果保存在result屬性中。此對像也是異步的。

-->  FileReader對象的方法如下：

        readAsBinaryString(file): 這個方法將blob對像或文件中的數據讀取為二進製字符串，通常我們將它傳送到服務器端，服務器端可以通過這段字符串存儲文件。

        readAsText(file,encoding): 以純文本形式讀取文件，將讀取到的文本保存在result屬性中，第二個參數用於指定編碼類型，可選的。

        readAsDataURL(file): 讀取文件並將文件以數據URL的形式保存在result屬性中。

        readAsArrayBuffer(file): 讀取文件並將一個包含文件內容的ArrayBuffer保存在result屬性中。

-->  FileReader對象的事件如下：

        onabort: 數據讀取中斷時觸發

        onerror: 數據讀取出錯時觸發

        onloadstart: 數據讀取開始時觸發

        onprogress: 數據讀取中

        onload： 數據讀取成功完成時觸發

        onloadend: 數據讀取完成時觸發，無論成功或失敗。



再者, 以下為一些FileReader的語法:

https://developer.mozilla.org/zh-TW/docs/Web/API/FileReader

Blob這東西稍微需了解
-->  https://developer.mozilla.org/zh-TW/docs/Web/API/Blob

https://developer.mozilla.org/zh-TW/docs/Web/API/FileReader/onload

https://developer.mozilla.org/zh-TW/docs/Web/API/FileReader/readAsDataURL

https://developer.mozilla.org/en-US/docs/Web/API/FileReader/result


再者, 如果不支援FileReader可以用的語法:

這語法已由readAsDataURL()取代(如果支援FileReader的話)
-->  https://developer.mozilla.org/zh-TW/docs/Web/API/File/getAsDataURL

IE7~9用此技術
-->  https://msdn.microsoft.com/en-us/library/ms532969(v=vs.85).aspx


最後, 去年有一篇說到data URI可減少HTTP Request, 而這篇有稍微解釋如何製作data URI, 及其使用時機:

http://www.awooseo.com/tec-01-datauris-html/