上傳圖片js判斷圖片尺寸和格式兼容IE
更新時(shí)間:2014年09月01日 15:09:33 投稿:whsnow
這篇文章主要介紹了上傳圖片js判斷圖片尺寸和格式并兼容IE,需要的朋友可以參考下
js代碼:
$(".head").change(function() { var val = $(this).val(); if(!val.match( /.jpg|.gif|.png|.bmp/i ) ){ imgtype = false; alert('圖片格式無(wú)效!'); }else{ if (FileReader) { var reader = new FileReader(), file = this.files[0]; reader.onload = function(e) { var image = new Image(); image.src = e.target.result; image.onload=function(){ if(image.width > 128 || image.height > 128){ fill = false; alert("頭像尺寸應(yīng)在128x128之間"); } } }; reader.readAsDataURL(file); }else{ //這是ie9版本 $(".preview_size_fake").show(); var objPreviewSizeFake = $(".preview_size_fake").get(0); var fileupload = $(this).get(0); fileupload.select(); fileupload.blur(); path = document.selection.createRange().text; if (/"\w\W"/.test(path)) { path = path.slice(1,-1); } objPreviewSizeFake.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = path; if(objPreviewSizeFake.offsetWidth > 128 || objPreviewSizeFake.offsetHeight > 128){ fill = false; alert("頭像尺寸應(yīng)在128x128之間"); } document.selection.empty(); } } });
css代碼(這個(gè)是必須寫的,如果不寫,ie下不起作用)
.preview_size_fake{ /* 該對(duì)象只用來(lái)在IE下獲得圖片的原始尺寸,無(wú)其它用途 */ filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image); height: 1px; visibility:hidden; overflow: hidden; display: none; }
html代碼:
<input class="head" type="file" name="avatar"> <img class="preview_size_fake" />
相關(guān)文章
JavaScript實(shí)現(xiàn)世界各地時(shí)間顯示
這篇文章主要為大家詳細(xì)介紹了javaScript實(shí)現(xiàn)世界各地時(shí)間顯示,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-09-09ES6新特性八:async函數(shù)用法實(shí)例詳解
這篇文章主要介紹了ES6新特性八:async函數(shù)用法,結(jié)合實(shí)例形式分析了async函數(shù)的功能、原理、使用方法與相關(guān)注意事項(xiàng),需要的朋友可以參考下2017-04-04極致之美——百行代碼實(shí)現(xiàn)全新智能語(yǔ)言
極致之美——百行代碼實(shí)現(xiàn)全新智能語(yǔ)言...2007-03-03JavaScript模擬可展開(kāi)、拖動(dòng)與關(guān)閉的聊天窗口實(shí)例
這篇文章主要介紹了JavaScript模擬可展開(kāi)、拖動(dòng)與關(guān)閉的聊天窗口,實(shí)例分析了javascript實(shí)現(xiàn)可拖動(dòng)的div層相關(guān)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-05-05用JS實(shí)現(xiàn)網(wǎng)頁(yè)元素陰影效果的研究總結(jié)
用JS實(shí)現(xiàn)網(wǎng)頁(yè)元素陰影效果的研究總結(jié)...2007-08-08對(duì)于Javascript 執(zhí)行上下文的全面了解
下面小編就為大家?guī)?lái)一篇對(duì)于Javascript 執(zhí)行上下文的全面了解。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09