上傳圖片本地預覽效果實現（兼容IE8）

最近項目裏須要用到上傳圖片並預覽的功能，因而寫了個jQuery預覽圖片插件，下載地址。若是有須要的，能夠直接下載。第一次寫jQuery插件，若有不對之處，歡迎你們指正。下面是一些相關的知識點。

HTML5 File API

在HTML5 File API出現前，前端對於文件的操做的很是有侷限性的。出於安全角度考慮，從本地上傳文件時，代碼是不可能獲取文件在用戶本地的地址。可是File API的出現，實現了這一功能。File API主要有如下幾個接口：

1. Blob

2. File

3. FileList

4. FileReader

FileList API

當經過file控件獲取文件後，能夠經過該控件的files屬性獲得FileList對象。FileList對象裏保存着選擇的文件，即File對象。在MDN裏有以下提示：

在Gecko 1.9.2以前,經過input元素,每次只能選擇一個文件,這意味着該input元素的file
s屬性上的FileList對象只能包含一個文件.從Gecko
1.9.2開始,若是一個input元素擁有multiple屬性,則能夠用它來選擇多個文件.

所以須要注意，在默認狀態下選擇文件，每次FileList對象裏只有一個File文件。
以上傳圖片爲例。File對象保存了「name」,"size","type"等圖片的信息。

<input id="fileItem" type="file">
var file = document.getElementById('fileItem').files[0];

FileReader API實現本地圖片預覽

FileReader用來異步讀取本地文件
FileReader對象容許web應用程序異步讀取存儲在用戶計算機上的文件（或原始數據緩衝區）的內容。咱們能夠經過FileList獲取上傳的圖片相關信息，可是想要實現本地預覽還須要藉助FileReader來實現,FileReader能夠讀取本地圖片，並將圖片數據轉換成base64編碼的字符串形式嵌入到頁面中。

//建立一個FileReader對象
var reader = new FileReader();
//讀取file文件；
reader.readAsDataURL(file);

FileReader提供了幾個方法，如readAsText(),readAsDataURL(),readAsArrayBuffer()，分別表示用不一樣的數據格式來讀取上傳的文件，並將結果保存在result屬性裏。
在讀取本地文件的過程當中，FileReader提供了一些事件可供監聽。如onprogress,onload,onerror,onabort等。在上傳圖片的過程當中，經常使用到的有onprogress事件在讀取數據過程當中週期性調用，能夠用來實現上傳進度條效果，onload事件，當讀取操做成功完成時調用。在咱們實現上傳圖片的效果裏，就有用到。

//當文件讀取成功後，將結果保存到url變量裏；
reader.onload = function(evt) {
    var url = evt.target.result;
}

最後，將該url賦值給img元素的src屬性，即可以實現本地圖片預覽了。
關於兼容性，不兼容IE9及如下瀏覽器，其它主流瀏覽器通常都沒有問題。

HTML5 URL API

URL對象用於生成指向File對象或者Blob對象的URL。使用URL的好處是能夠沒必要把文件內容讀取到JavaScript中而能夠直接使用文件內容。若是經過URL對象來實現本地預覽，那麼只需將生成的File對象的URL傳遞給img元素的src屬性便可。

當使用一個沒有實現該構造器的用戶代理時，能夠經過 Window.URL
屬性來訪問該對象（基於 Webkit 和 Blink 內核的瀏覽器都可用 Window.webkitURL
代替）。

var url = window.URL || window.webkitURL;

createObjectURL()實現本地圖片預覽

URL對象有兩個方法，分別是createObjectURL()和revokeObjectURL()。

1. createObjectURL()的做用
   生成文件File對象或者Blob對象的URL對象，經過這個URL，能夠訪問到URL所指向文件的整個內容。

var src = url.createObjectURL(file);

在每次調用createObjectURL()方法的時候,都會建立一個新的對象URL,即便你已經用相同的對象做爲參數建立過。在你不須要這些對象URL的時候,你應該經過調用 window.URL.revokeObjectURL()方法來釋放它們所佔用的內容。

1. revokeOjectURL()的用法

url.revokeObjectURL(src);

參數src是上述咱們經過createObjectURL建立的URL對象。
關於兼容性，不兼容IE9及如下瀏覽器，其它主流瀏覽器通常都沒有問題。在MDN裏提到，這是一個實驗中的功能。

圖片預覽兼容IE處理

IE9及如下版本不支持File API和URL API。所以須要作兼容處理。
在這裏，咱們須要用到document.selection。document.selection只有IE支持。表明了當前激活選中區，即高亮文本塊，和/或文檔中用戶可執行某些操做的其它元素。selection 對象的典型用途是做爲用戶的輸入，以便識別正在對文檔的哪一部分正在處理，或者做爲某一操做的結果輸出給用戶。
在用document.selection前，咱們須要先建立選中區。如鼠標選中文本框，便是一個選中區。也能夠經過js提供的select()方法建立一個選中區。建立了選中區後，咱們就能夠經過document.selection獲取該選中區。若是要對選中區執行操做，則須要先調用createRange()方法。

//獲取上傳文件控件的值；
file.select();
var url = document.selection.createRange().text;

現有的獲取IE低版本上傳文件的value值通常都是這種方式，在IE中本來能夠直接經過input的value值來獲取上傳圖片的路徑，可是在實際中不多看到使用。具體的你們能夠去查查資料。
非IE6版本的IE因爲安全問題直接設置img的src沒法顯示本地圖片，可是能夠經過濾鏡來實現。

pic.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src=\"" + reallocalpath + "\")";

到這裏，圖片本地預覽基本就完成了。