javascript上傳圖片前預(yù)覽圖片兼容大多數(shù)瀏覽器
更新時(shí)間:2013年10月25日 17:04:02 作者:
上傳圖片前預(yù)覽圖片這種效果應(yīng)用比較廣泛,實(shí)現(xiàn)的方也大同小異,下面為大家介紹下,在javascript中是如何實(shí)現(xiàn)的,感興趣的朋友可以參考下
復(fù)制代碼 代碼如下:
<div id="localImag"><img id="preview" width="-1" height="-1" style="display:none" /></div>
<asp:FileUpload ID="file_head" runat="server" onchange="javascript:setImagePreview();" />
復(fù)制代碼 代碼如下:
<script type="text/javascript">
function setImagePreview() {
var docObj = document.getElementById("ctl00_ContentMain_file_head");
var fileName = docObj.value;
if (!fileName.match(/.jpg|.gif|.png|.bmp/i)) {
alert('您上傳的圖片格式不正確,請(qǐng)重新選擇!');
return false;
}
var imgObjPreview = document.getElementById("preview");
if (docObj.files && docObj.files[0]) {
//火狐下,直接設(shè)img屬性
imgObjPreview.style.display = 'block';
imgObjPreview.style.width = '63px';
imgObjPreview.style.height = '63px';
//imgObjPreview.src = docObj.files[0].getAsDataURL();
if (window.navigator.userAgent.indexOf("Chrome") >= 1 || window.navigator.userAgent.indexOf("Safari") >= 1) {
imgObjPreview.src = window.webkitURL.createObjectURL(docObj.files[0]);
}
else {
imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
}
} else {
//IE下,使用濾鏡
docObj.select();
docObj.blur();
var imgSrc = document.selection.createRange().text;
var localImagId = document.getElementById("localImag");
//必須設(shè)置初始大小
localImagId.style.width = "63px";
localImagId.style.height = "63px";
//圖片異常的捕捉,防止用戶修改后綴來(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>
此js解決360瀏覽器顯示圖片問(wèn)題。因?yàn)?60瀏覽器6.2用的是Chrome的內(nèi)核,而
復(fù)制代碼 代碼如下:
window.URL.createObjectURL(docObj.files[0]);
只有在火狐下才認(rèn)得到,chrome中不認(rèn)識(shí)window.URL.createObjectURL,所有用Safari的window.webkitURL.createObjectURL
您可能感興趣的文章:
- JS HTML5拖拽上傳圖片預(yù)覽
- js實(shí)現(xiàn)上傳圖片及時(shí)預(yù)覽
- javascript實(shí)現(xiàn)input file上傳圖片預(yù)覽效果
- js實(shí)現(xiàn)上傳圖片預(yù)覽的方法
- 上傳圖片預(yù)覽JS腳本 Input file圖片預(yù)覽的實(shí)現(xiàn)示例
- js實(shí)現(xiàn)上傳圖片之上傳前預(yù)覽圖片
- javascript實(shí)現(xiàn)上傳圖片并預(yù)覽的效果實(shí)現(xiàn)代碼
- js 上傳圖片預(yù)覽問(wèn)題
- JS實(shí)現(xiàn)上傳圖片的三種方法并實(shí)現(xiàn)預(yù)覽圖片功能
相關(guān)文章
JavaScript統(tǒng)計(jì)網(wǎng)站訪問(wèn)次數(shù)的實(shí)現(xiàn)代碼
每一個(gè)稱職的網(wǎng)管,都需要知道每天網(wǎng)站的訪問(wèn)量,需要實(shí)現(xiàn)網(wǎng)站訪問(wèn)次數(shù)功能來(lái)滿足需求,本篇文章主要介紹了JavaScript統(tǒng)計(jì)網(wǎng)站訪問(wèn)次數(shù)的實(shí)現(xiàn)代碼,感興趣的小伙伴們可以參考一下2015-11-11
three.js鏡頭追蹤的移動(dòng)效果實(shí)例
這篇文章主要為大家介紹了three.js鏡頭追蹤的移動(dòng)效果實(shí)例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-08-08
JavaScript建立一個(gè)語(yǔ)法高亮輸入框?qū)崿F(xiàn)思路
通常網(wǎng)站自帶的textarea編輯器不能滿足我們的需求比如高亮顯示代碼等,在這篇文章中,我將使用JavaScript庫(kù)ACE來(lái)創(chuàng)建一個(gè)輸入框效果,該腳本允許開(kāi)發(fā)人員創(chuàng)建支持語(yǔ)法高亮的輸入框,感興趣的你可不要錯(cuò)過(guò)了哈2013-02-02
JavaScript如何獲取和解析頁(yè)面內(nèi)容
這篇文章主要為大家詳細(xì)介紹了如何利用JavaScript實(shí)現(xiàn)獲取和解析頁(yè)面內(nèi)容,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以了解一下2025-03-03
uni-app實(shí)現(xiàn)熱更新的詳細(xì)操作步驟
隨著 App 成功上架,可能更新頻率往往會(huì)越來(lái)越高,傳統(tǒng)的應(yīng)用更新方式要求用戶重新下載并安裝應(yīng)用,這不僅耗費(fèi)用戶大量時(shí)間、流量,還嚴(yán)重影響用戶體驗(yàn),為了提升用戶體驗(yàn),熱更新技術(shù)應(yīng)運(yùn)而生,所以本文介紹了uni-app實(shí)現(xiàn)熱更新的詳細(xì)操作步驟,需要的朋友可以參考下2025-04-04
簡(jiǎn)單的前端js+ajax 購(gòu)物車框架(入門(mén)篇)
其實(shí),一直想把自己寫(xiě)的一些js給總結(jié)下,也許是能力有限不能把它完美結(jié)合起來(lái)。只能自己默默的看著哪些代碼,無(wú)能為力2011-10-10

