在現在的Web開發中不可避免的會做一個圖片預覽的功能，比如在上傳圖片的情況下，一個很簡單的辦法就是講圖片上傳至服務器之后，再將文件的URL返回回來，然后異步通過這個URL加載剛剛上傳的圖片，實現圖片的預覽，很明顯的在這個過程中兩次Web請求，一次發送文件，一次下載文件，到最后這個文件如果在客戶端被刪除（取消上傳，棄用這次的上傳），這整個過程都白費了。我們希望能夠在圖片上傳之前就能進行圖片的預覽，這樣就避免了不必要的網絡請求和時間等待。下面的內容就圍繞這個話題展開。
本地圖片預覽
IE中的本地圖片預覽（以本地文件的形式訪問）
在IE中能夠很方便的實現本地網頁的圖片預覽，IE中的<input type="file" id="file_upload">中的File對象中的value屬性，存儲的是要上傳的文件的完整路徑，在IE中只需要將這個完整路徑作為一個Image對象的src屬性，就能實現在這個Image對象中對這個上傳的圖片進行預覽。
在IE中有如下方式:
var url; var fileobj = document.getElementById(sourceId); fileobj.select(); url = document.selection.createRange().text;
或者
var url = document.getElementById(sourceId).value;
兩種方式獲取到的路徑直接給img src 可以進行本地圖片的預覽（可以加上file:///協議，效果一樣），這兩種方式對IE7、8、9、10、11下有效。
Firefox和Chrome的本地圖片預覽
在Firefox和Chrome中使用如下方式:
var url = window.URL.createObjectURL(document.getElementById(sourceId).files[0])
將得到的值給img src 進行圖片預覽。可能還會看到如下的方式：var url = obj.files.item(0).getAsDataURL();
這種使用Firefox File對象的getAsDataURL的方式，已經在Firefox 7.0以后棄用，Firefox DOM File，可能原因是在HTML5標准中有相關的定義。
服務端圖片預覽
IE中的本地圖片預覽（以服務端URL的形式訪問）
上面提到的本地預覽的方式，在以服務端URL的形式方式下沒有預覽的效果，需要使用如下濾鏡的形式。
function PreviewImg(imgFile){
var newPreview = document.getElementById("newPreview");
var imgDiv = document.createElement("div");
document.body.appendChild(imgDiv);
imgDiv.style.width = "118px"; imgDiv.style.height = "127px";
imgDiv.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod = scale)";
imgDiv.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgFile.value;
newPreview.appendChild(imgDiv);
}
上面的實現可以在IE7、8、9下運行，在IE10、11下無效。h2. Firefox和Chrome的本地圖片預覽在Firefox和Chrome中使用如下方式:
var url = window.URL.createObjectURL(document.getElementById(sourceId).files[0])
將得到的值給img src 進行圖片預覽。可能還會看到如下的方式：
var url = obj.files.item(0).getAsDataURL();
這種使用Firefox File對象的getAsDataURL的方式，已經在Firefox 7.0以后棄用，Firefox DOM File，可能原因是在HTML5標准中有相關的定義。
基礎
- 在Chrome中，window.URL和window.webkitURL都存在
- 在Firefox中，僅Window.URL存在
- 在IE11（Edge），10中僅window.URL存在
- 在IE7、8、9中不存在window.URL
- 在IE中能通過FileObject 的value 屬性獲取文件全路徑
- 在Chrome中無法獲取FileObject的全路徑，得到的是一個假路徑
- 在Firefox中根本獲取不到路徑，得到的是一個文件名
- 在IE7、8、9中無法獲取到FileObject的files屬性
實現
以前我們總是按照userAgent，通過判斷IE，還是Chrome，還是Firefox，或者Safari、Opera等來對應支持代碼，現在這種方式可能需要有所調整，File API是HTML5的規范特性，因此可以將瀏覽器大致先分為兩個大類，一個是支持HTML5的一類，另一個是不支持的。
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.image_container {
width: 48px;
height: 48px;
position: relative;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script language="javascript">
$(function() {
$("#file_upload").change(function() {
var $file = $(this);
var fileObj = $file[0];
var windowURL = window.URL || window.webkitURL;
var dataURL;
var $img = $("#preview");
if(fileObj && fileObj.files && fileObj.files[0]){
dataURL = windowURL.createObjectURL(fileObj.files[0]);
$img.attr('src',dataURL);
}else{
dataURL = $file.val();
// $img.css("filter",'progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod = scale,src="' + dataURL + '")');
// var imgObj = document.getElementById("preview");
// imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\"" + dataURL + "\")";
// imgObj.style.width = "48px";
// imgObj.style.height = "48px";
var imgObj = document.getElementById("preview");
// 兩個坑:
// 1、在設置filter屬性時，元素必須已經存在在DOM樹中，動態創建的Node，也需要在設置屬性前加入到DOM中，先設置屬性在加入，無效；
// 2、src屬性需要像下面的方式添加，上面的兩種方式添加，無效；
imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
imgObj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL;
}
});
});
</script>
</head>
<body>
<div id="demo">
<input id="file_upload" type="file" />
<div class="image_container">
<img id="preview" width="60" height="60">
</div>
</div>
</body>
</html>
參考資料
- JavaScript圖片上傳預覽效果
- 兼容IE8、火狐的本地圖片預覽+等比例縮放
- 圖片上傳預覽（IE使用濾鏡）
- [[轉]很簡單的JS實現上傳前預覽圖片(兼容IE8)|http://www.cnblogs.com/seasons1987/archive/2012/11/16/2773548.html]
- 圖片上傳預覽（支持IE，Chrome，Firefox）
- JS魔法堂之實戰：純前端的圖片預覽
- 關於IE中CSS-filter濾鏡小知識
- BT9011: 只有 IE 支持 CSS Filter
- css filter詳解
- 精通CSS濾鏡（filter）（實例解析）
- 不得不收藏的------IE中CSS-filter濾鏡小知識大全
- MSDN Filters and Transitions
- Visual Filters and Transitions Reference
- JS魔法堂：Data URI Scheme介紹
- Using files from web applications
- 如何在web應用程序中使用文件
- [[譯]JavaScript文件操作(4)-URL對象|http://www.iunbug.com/archives/2012/06/05/254.html]
- window.url.createobjecturl 兼容多個瀏覽器（IE,google,360,Safari,firefox）
- 微軟相關產品API參考
- Windows Internet Explorer API 參考
- Developer Guides (by IE version)
- window.URL參考
- Firefox API參考