javascript上傳圖片前預(yù)覽圖片兼容大多數(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('您上傳的圖片格式不正確,請重新選擇!');
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";
//圖片異常的捕捉,防止用戶修改后綴來偽造圖片
try {
localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
} catch (e) {
alert("您上傳的圖片格式不正確,請重新選擇!");
return false;
}
imgObjPreview.style.display = 'none';
document.selection.empty();
}
return true;
}
</script>
此js解決360瀏覽器顯示圖片問題。因?yàn)?60瀏覽器6.2用的是Chrome的內(nèi)核,而
復(fù)制代碼 代碼如下:
window.URL.createObjectURL(docObj.files[0]);
只有在火狐下才認(rèn)得到,chrome中不認(rèn)識window.URL.createObjectURL,所有用Safari的window.webkitURL.createObjectURL
您可能感興趣的文章:
- JS HTML5拖拽上傳圖片預(yù)覽
- js實(shí)現(xiàn)上傳圖片及時預(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ù)覽問題
- JS實(shí)現(xiàn)上傳圖片的三種方法并實(shí)現(xiàn)預(yù)覽圖片功能
相關(guān)文章
JavaScript使用箭頭函數(shù)實(shí)現(xiàn)優(yōu)化代碼
在JavaScript的編程世界里,我們時常被普通函數(shù)的冗長寫法所困擾,每次都需要寫function關(guān)鍵字,有時候還要明確地寫return語句,下面我們就來看看如何利用箭頭函數(shù)優(yōu)化這些繁瑣的代碼吧2023-11-11JS獲取鼠標(biāo)坐標(biāo)、獲取鼠標(biāo)像素點(diǎn)示例
運(yùn)行代碼之后隨意移動鼠標(biāo)的位置,可適時顯現(xiàn)鼠標(biāo)的坐標(biāo)點(diǎn),不占用系統(tǒng)資源2014-03-03使用Auto.js?調(diào)用系統(tǒng)短信、電話模塊實(shí)現(xiàn)功能
這篇文章主要介紹了如何使用Auto.js調(diào)用系統(tǒng)短信與電話模塊,并實(shí)現(xiàn)讀取短信與聯(lián)系人的功能,并給出了實(shí)現(xiàn)相應(yīng)功能的代碼2023-03-03JS使用正則截取兩個字符串之間的字符串實(shí)現(xiàn)方法詳解
這篇文章主要介紹了JS使用正則截取兩個字符串之間的字符串實(shí)現(xiàn)方法,結(jié)合實(shí)例形式簡單分析了JS正則匹配與截取操作的實(shí)現(xiàn)技巧,并拓展分析了數(shù)量詞的概念與功能,需要的朋友可以參考下2017-01-01JS實(shí)現(xiàn)仿蘋果底部任務(wù)欄菜單效果代碼
這篇文章主要介紹了JS實(shí)現(xiàn)仿蘋果底部任務(wù)欄菜單效果代碼,可實(shí)現(xiàn)鼠標(biāo)滑過顯示大圖標(biāo)功能,涉及javascript鼠標(biāo)事件及頁面元素遍歷并修改屬性的技巧,需要的朋友可以參考下2015-08-08