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

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

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

Blob

File

FileList

FileReader

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

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

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

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

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

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

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

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

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

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

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

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

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

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

var src = url.createObjectURL(file);

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

revokeOjectURL()的用法

url.revokeObjectURL(src); 

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

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

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

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

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

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