js實現(xiàn)上傳圖片預(yù)覽的方法
本文實例講述了js實現(xiàn)上傳圖片預(yù)覽的方法。分享給大家供大家參考。具體實現(xiàn)方法如下:
{
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("對不起,系統(tǒng)僅支持標(biāo)準(zhǔn)格式的照片,請您調(diào)整格式后重新上傳,謝謝 !");
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;
}
}
}
調(diào)用:
style="width: 200px; height: 20px;" onchange="PreviewImage(this)" id="upload" />
<div id="imgPreview" style="width:120px; height:100px;margin-left: 280px;">
</div>
運行效果如下圖所示:
希望本文所述對大家的javascript程序設(shè)計有所幫助。
相關(guān)文章
js實現(xiàn)左側(cè)網(wǎng)頁tab滑動門效果代碼
這篇文章主要介紹了js實現(xiàn)左側(cè)網(wǎng)頁tab滑動門效果代碼,涉及JavaScript頁面元素的遍歷及元素屬性動態(tài)切換的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-09-09JavaScript生成隨機數(shù)的4種自定義函數(shù)分享
這篇文章主要介紹了JavaScript生成隨機數(shù)的4種自定義函數(shù)分享,本文講解了4種方法并同時給出4個代碼片段,需要的朋友可以參考下2015-02-02