JS上傳前預(yù)覽圖片實(shí)例
預(yù)覽圖片的js代碼:
<script type="text/javascript">
function setImagePreview(docObj,localImagId,imgObjPreview)
{
if(docObj.files && docObj.files[0])
{
//火狐下,直接設(shè)img屬性
imgObjPreview.style.display = 'block';
imgObjPreview.style.width = '300px';
imgObjPreview.style.height = '200px';
//火狐7以上版本不能用上面的getAsDataURL()方式獲取,需要一下方式
imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
}
else
{
//IE下,使用濾鏡
docObj.select();
var imgSrc = document.selection.createRange().text;
//必須設(shè)置初始大小
localImagId.style.width = "300px";
localImagId.style.height = "200px";
//圖片異常的捕捉,防止用戶修改后綴來(lái)偽造圖片
try
{
localImagId.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
}
catch(e)
{
alert("您上傳的圖片格式不正確,請(qǐng)重新選擇!");
return false;
}
imgObjPreview.style.display = 'none';
document.selection.empty();
}
return true;
}
</script>
fileupload控件及用來(lái)預(yù)覽圖片的image:
<div id="localImag" style="width: 300px; height: 200px">
<img id="preview" alt="預(yù)覽圖片" src="http://www.dbjr.com.cn/images/logo.gif" width="300px" height="200px" />
</div>
<asp:FileUpload ID="PicLoad" Width="300px" runat="server" onchange="javascript:setImagePreview(this,localImag,preview);">
</asp:FileUpload>
功能很簡(jiǎn)單,代碼也很易懂,相信不用我多廢話大家也能看懂吧。感覺(jué)寫(xiě)這樣的文章,真的沒(méi)啥好說(shuō)的,不多說(shuō),還是把重點(diǎn)放在代碼上吧。
- JS實(shí)現(xiàn)上傳圖片的三種方法并實(shí)現(xiàn)預(yù)覽圖片功能
- js實(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實(shí)現(xiàn)圖片預(yù)覽加上傳(前后端交互)
相關(guān)文章
判斷js的Array和Object的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇判斷js的Array和Object的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-08利用JS解決ie6不支持max-width,max-height問(wèn)題的方法
本篇文章主要介紹了利用JS解決ie6不支持max-width,max-height問(wèn)題的方法。需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2014-01-01js如何使用Pagination+PageHelper實(shí)現(xiàn)分頁(yè)
本文主要介紹了js如何使用Pagination+PageHelper實(shí)現(xiàn)分頁(yè),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06JavaScript中正則表達(dá)式使數(shù)字、中文或指定字符高亮顯示
這篇文章主要介紹了JavaScript中正則表達(dá)式使數(shù)字、中文或指定字符高亮顯示,需要的朋友可以參考下2017-10-10JavaScript實(shí)現(xiàn)shuffle數(shù)組洗牌操作示例
這篇文章主要介紹了JavaScript實(shí)現(xiàn)shuffle數(shù)組洗牌操作,結(jié)合實(shí)例形式分析了javascript數(shù)組的定義、構(gòu)造、排序等相關(guān)操作技巧,需要的朋友可以參考下2019-01-01