相容IE6,IE7,IE8和Firefox的圖片上傳預覽效果
所謂圖片上傳預覽，就是在使用檔案選擇框選擇了檔案之後就可以在頁面上看見圖片的效果，關於這個效果我一直認為是無法做到的，沒想到前不久被zhuozi搞定了。
網上流傳的一些關於圖片上傳預覽的程式碼都是差不多的，IE6下使用檔案選擇物件的value屬性取出將要上傳的本地檔案路徑，然後使用本地路徑構造img標籤，程式碼如下：
<input type="file"
onchange="document.getElementById('view').innerHTML=' <img src=/'' + this.value + '/'/>';" />
<div id="view"> </div>
網上有些人說上面的程式碼可以在IE7下生效，但實際測試是不行的，因為IE7的img標籤不支援本地路徑，所以需要使用div和css的filter來實現這個效果，程式碼如下：
<input type="file" onchange=‘javascript:
document.getElementById("pic").filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src
= this.value;’ /><br />
<div id="pic"
style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);
width:400px;height:200px;"></div>
而關於Firefox的圖片上傳預覽效果，網上幾乎找不到相關資料，比較容易想到的解決方案無非是自動將圖片上傳到伺服器再顯示出來諸如此類，但這裡我們不對此類技術進行討論，我們要做的是正宗的上傳前本地預覽。
以下是最後的研究結果，同時相容IE6,IE7,IE8和Firefox。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script>
var picPath;
var image;
// preview picture
function preview()
{
document.getElementById('preview').style.display = 'none';
// 下面程式碼用來獲得圖片尺寸，這樣才能在IE下正常顯示圖片
document.getElementById('box').innerHTML
= "<img width='"+image.width+"' height='"+image.height+"' id='aPic' src='"+picPath+"'>";
}
// show view button
function buttonShow()
{
/*
這裡用來解決圖片載入延時造成的預覽失敗.
簡單說明一下，當image物件的src屬性發生改變時JavaScript會重新給image裝載圖片內容，
這通常是需要一些時間的，如果在載入完成之前想將圖片顯示出來就會造成錯誤，所以我們
通過圖片的寬度和高度來判斷圖片是否已經被成功載入，載入完畢才會顯示預覽按鈕.
這裡我仍然有一個困惑，在IE7下預覽效果偶爾會失效.
*/
if ( image.width == 0 || image.height == 0 ) {
setTimeout(buttonShow, 1000);
} else {
document.getElementById('preview').style.display = 'block';
}
}
function loadImage(ele) {
picPath = getPath(ele);
image = new Image();
image.src = picPath;
setTimeout(buttonShow, 1000);
}
function getPath(obj)
{
if(obj)
{
//ie
if (window.navigator.userAgent.indexOf("MSIE")>=1)
{
obj.select();
// IE下取得圖片的本地路徑
return document.selection.createRange().text;
}
//firefox
else if(window.navigator.userAgent.indexOf("Firefox")>=1)
{
if(obj.files)
{
// Firefox下取得的是圖片的資料
return obj.files.item(0).getAsDataURL();
}
return obj.value;
}
return obj.value;
}
}
</script>
</head>
<body>
<input type="file" name="pic" id="pic" onchange='loadImage(this)' />
<input id='preview' type='button' value='preview' style='display:none;' onclick='preview();'>
<div id='box'></div>
</body>
</html>