摘要：以上傳圖片為例。我們可以通過獲取上傳的圖片相關信息，但是想要實現本地預覽還需要借助來實現可以讀取本地圖片，并將圖片數據轉換成編碼的字符串形式嵌入到頁面中。在我們實現上傳圖片的效果里，就有用到。圖片預覽兼容處理及以下版本不支持和。

最近項目里需要用到上傳圖片并預覽的功能，于是寫了個jQuery預覽圖片插件，下載地址。如果有需要的，可以直接下載。第一次寫jQuery插件，如有不對之處，歡迎大家指正。下面是一些相關的知識點。

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

Blob

File

FileList

FileReader

當通過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"等圖片的信息。

var file = document.getElementById("fileItem").files[0];

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及以下瀏覽器，其它主流瀏覽器一般都沒有問題。

URL對象用于生成指向File對象或者Blob對象的URL。使用URL的好處是可以不必把文件內容讀取到JavaScript中而可以直接使用文件內容。如果通過URL對象來實現本地預覽，那么只需將生成的File對象的URL傳遞給img元素的src屬性即可。

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

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

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

createObjectURL()的作用
生成文件File對象或者Blob對象的URL對象，通過這個URL，可以訪問到URL所指向文件的整個內容。

var src = url.createObjectURL(file);

在每次調用createObjectURL()方法的時候,都會創建一個新的對象URL,即使你已經用相同的對象作為參數創建過。在你不需要這些對象URL的時候,你應該通過調用 window.URL.revokeObjectURL()方法來釋放它們所占用的內容。

revokeOjectURL()的用法

url.revokeObjectURL(src); 

參數src是上述我們通過createObjectURL創建的URL對象。
關于兼容性，不兼容IE9及以下瀏覽器，其它主流瀏覽器一般都沒有問題。在MDN里提到，這是一個實驗中的功能。

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 + "")";

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