本文實例講述了js實現上傳圖片預覽的方法。分享給大家供大家參考。具體實現方法如下：
複製代碼代碼如下:function PreviewImage(imgFile)
{
var filextension=imgFile.value.substring(imgFile.value.lastIndexOf("."),imgFile.value.length);
filextension=filextension.toLowerCase();
if ((filextension!='.jpg')&&(filextension!='.gif')&&(filextension!='.jpeg')&&(filextension!='.png')&&(filextension!='.bmp'))
{
alert("對不起，系統僅支持標準格式的照片，請您調整格式後重新上傳，謝謝!");
imgFile.focus();
}
else
{
var path;
if(document.all)//IE
{
imgFile.select();
path = document.selection.createRange().text;
document.getElementById("imgPreview").innerHTML="";
document.getElementById("imgPreview").style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src=/"" + path + "/")";//使用濾鏡效果
}
else//FF
{
path = imgFile.files[0].getAsDataURL();
document.getElementById("imgPreview").innerHTML = "<img id='img1' width='120px' height='100px' src='"+path+"'/>";
// document.getElementById("img1").src = path;
}
}
}
調用：
複製代碼代碼如下:上傳圖片:<input type="file" name="file"
style="width: 200px; height: 20px;" onchange="PreviewImage(this)" id="upload" />
<div id="imgPreview">
</div>
運行效果如下圖所示：
希望本文所述對大家的javascript程序設計有所幫助。