js實(shí)現(xiàn)上傳圖片預(yù)覽的方法
本文實(shí)例講述了js實(shí)現(xiàn)上傳圖片預(yù)覽的方法。分享給大家供大家參考。具體實(shí)現(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("對(duì)不起，系統(tǒng)僅支持標(biāo)準(zhǔn)格式的照片，請(qǐng)您調(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>
運(yùn)行效果如下圖所示：
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
- JS實(shí)現(xiàn)上傳圖片的三種方法并實(shí)現(xiàn)預(yù)覽圖片功能
- js實(shí)現(xiàn)圖片上傳并預(yù)覽功能
- 上傳圖片預(yù)覽JS腳本 Input file圖片預(yù)覽的實(shí)現(xiàn)示例
- js實(shí)現(xiàn)上傳圖片之上傳前預(yù)覽圖片
- Javascript圖片上傳前的本地預(yù)覽實(shí)例
- js圖片上傳前預(yù)覽功能（兼容所有瀏覽器）
- js實(shí)現(xiàn)圖片上傳預(yù)覽原理分析
- js 上傳圖片預(yù)覽問(wèn)題
- JS上傳前預(yù)覽圖片實(shí)例
- 如何利用原生JS實(shí)現(xiàn)圖片預(yù)覽加上傳(前后端交互)
相關(guān)文章
經(jīng)常使用其他腳本語(yǔ)言（ASP ASP.NET PHP等）獲取頁(yè)面的瀏覽來(lái)源，今天我們來(lái)研究下使用Javascript以及C#獲取頁(yè)面的referer。2014-11-11
JavaScript中undefined和null的區(qū)別
這篇文章主要介紹了 JavaScript中undefined和null的區(qū)別的相關(guān)資料,需要的朋友可以參考下2017-05-05
這篇文章主要介紹了獲取XMLHttpRequest對(duì)象的三種方式,需要的朋友可以參考下2014-04-04
javascript一種直譯式腳本語(yǔ)言，是一種動(dòng)態(tài)類型、弱類型、基于原型的語(yǔ)言，內(nèi)置支持類型，本文給大家分享javascript實(shí)用方法二，感興趣的朋友一起學(xué)習(xí)吧2015-12-12
這篇文章主要為大家詳細(xì)介紹了H5 js點(diǎn)擊按鈕復(fù)制文本到粘貼板，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-11-11
JS+CSS模擬可以無(wú)刷新顯示內(nèi)容的留言板實(shí)例
這篇文章主要介紹了JS+CSS模擬可以無(wú)刷新顯示內(nèi)容的留言板,涉及javascript操作dom元素、鼠標(biāo)事件及css樣式的技巧,需要的朋友可以參考下2015-03-03
詳細(xì)聊聊JavaScript是如何影響DOM樹(shù)構(gòu)建的
向當(dāng)前style sheet中插入一個(gè)新的style實(shí)現(xiàn)方法