上傳圖片對圖片進行一下預覽，可以瞭解圖片上傳後大概會是什麼樣子，此功能用js實現，然後在fileupload控件的change事件中調用，這樣當用fileupload選擇完圖片以後，圖片就會自動顯示出來了。功能很簡單，真的很實用。以下代碼已親測。
已將js封裝，共2共文件：ImgPreview.js和ImgPreview.html
ImgPreview.js代碼：
//下面用於圖片上傳預覽功能
//docInput:上傳圖片按鈕的ID
//imgDmo:顯示圖片的標籤（img）的ID
//width:顯示的圖片寬度
//height:顯示的圖片高度
function setImagePreview(docInput,imgDmo,width,height) {
var docObj=document.getElementById(docInput); //jquery寫法：$("#"docInput)
var imgObjPreview=document.getElementById(imgDmo);//jquery寫法：$("#"imgDmo)[0]
if(docObj.files &&docObj.files[0])
{
//火狐下，直接設img屬性
imgObjPreview.style.display = 'block';
imgObjPreview.style.width = width+'px';
imgObjPreview.style.height = height+'px';
//imgObjPreview.src = docObj.files[0].getAsDataURL();
//火狐7以上版本不能用上面的getAsDataURL()方式獲取，需要一下方式
imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
}
else
{
//IE下，使用濾鏡
docObj.select();
var imgSrc = document.selection.createRange().text;
var localImagId = document.getElementById("localImag");
//必須設置初始大小
localImagId.style.width = width+'px';
localImagId.style.height = height+'px';
//圖片異常的捕捉，防止用戶修改後綴來僞造圖片
try{
localImagId.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
}
catch(e)
{
alert("您上傳的圖片格式不正確，請重新選擇!");
return false;
}
imgObjPreview.style.display = 'none';
document.selection.empty();
}
return true;
}ImgPreview.html代碼：
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>By：DragonDean</title>
<script type="text/javascript" src="ImgPreview.js"></script>
</head>
<body>
<div id="localImag">
<img id="preview" src="http://blog.chuangling.net/Public/images/top.jpg" width="150" height="180" style="display: block; width: 150px; height: 180px;">
</div>
<input type="file" name="file" id="doc" style="width:150px;" onchange="javascript:setImagePreview('doc','preview',200,180);">
</body>
</html>有興趣的朋友可以看一下。
預覽時，發現360、Opera、Google Chrome都可以，但是IE就不行，希望有大神不吝指導。