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

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

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

Blob

File

FileList

FileReader

當(dāng)通過file控件獲取文件后，可以通過該控件的files屬性得到FileList對象。FileList對象里保存著選擇的文件，即File對象。在MDN里有如下提示：

在Gecko 1.9.2之前,通過input元素,每次只能選擇一個文件,這意味著該input元素的file
s屬性上的FileList對象只能包含一個文件.從Gecko 
1.9.2開始,如果一個input元素?fù)碛衜ultiple屬性,則可以用它來選擇多個文件.

因此需要注意，在默認(rèn)狀態(tài)下選擇文件，每次FileList對象里只有一個File文件。
以上傳圖片為例。File對象保存了“name”,"size","type"等圖片的信息。

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

FileReader用來異步讀取本地文件
FileReader對象允許web應(yīng)用程序異步讀取存儲在用戶計算機上的文件（或原始數(shù)據(jù)緩沖區(qū)）的內(nèi)容。我們可以通過FileList獲取上傳的圖片相關(guān)信息，但是想要實現(xiàn)本地預(yù)覽還需要借助FileReader來實現(xiàn),FileReader可以讀取本地圖片，并將圖片數(shù)據(jù)轉(zhuǎn)換成base64編碼的字符串形式嵌入到頁面中。

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

FileReader提供了幾個方法，如readAsText(),readAsDataURL(),readAsArrayBuffer()，分別表示用不同的數(shù)據(jù)格式來讀取上傳的文件，并將結(jié)果保存在result屬性里。
在讀取本地文件的過程中，F(xiàn)ileReader提供了一些事件可供監(jiān)聽。如onprogress,onload,onerror,onabort等。在上傳圖片的過程中，常用到的有onprogress事件在讀取數(shù)據(jù)過程中周期性調(diào)用，可以用來實現(xiàn)上傳進(jìn)度條效果，onload事件，當(dāng)讀取操作成功完成時調(diào)用。在我們實現(xiàn)上傳圖片的效果里，就有用到。

//當(dāng)文件讀取成功后，將結(jié)果保存到url變量里；
reader.onload = function(evt) {
    var url = evt.target.result;
}

最后，將該url賦值給img元素的src屬性，便可以實現(xiàn)本地圖片預(yù)覽了。
關(guān)于兼容性，不兼容IE9及以下瀏覽器，其它主流瀏覽器一般都沒有問題。

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

當(dāng)使用一個沒有實現(xiàn)該構(gòu)造器的用戶代理時，可以通過 Window.URL 
屬性來訪問該對象（基于 Webkit 和 Blink 內(nèi)核的瀏覽器均可用 Window.webkitURL 
代替）。

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

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

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

var src = url.createObjectURL(file);

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

revokeOjectURL()的用法

url.revokeObjectURL(src); 

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

IE9及以下版本不支持File API和URL API。因此需要做兼容處理。
在這里，我們需要用到document.selection。document.selection只有IE支持。代表了當(dāng)前激活選中區(qū)，即高亮文本塊，和/或文檔中用戶可執(zhí)行某些操作的其它元素。selection 對象的典型用途是作為用戶的輸入，以便識別正在對文檔的哪一部分正在處理，或者作為某一操作的結(jié)果輸出給用戶。
在用document.selection前，我們需要先創(chuàng)建選中區(qū)。如鼠標(biāo)選中文本框，即是一個選中區(qū)。也可以通過js提供的select()方法創(chuàng)建一個選中區(qū)。創(chuàng)建了選中區(qū)后，我們就可以通過document.selection獲取該選中區(qū)。如果要對選中區(qū)執(zhí)行操作，則需要先調(diào)用createRange()方法。

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

現(xiàn)有的獲取IE低版本上傳文件的value值一般都是這種方式，在IE中原本可以直接通過input的value值來獲取上傳圖片的路徑，但是在實際中很少看到使用。具體的大家可以去查查資料。
非IE6版本的IE由于安全問題直接設(shè)置img的src無法顯示本地圖片，但是可以通過濾鏡來實現(xiàn)。

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

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