上傳圖片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('圖片格式無效!');
}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ì)象只用來在IE下獲得圖片的原始尺寸,無其它用途 */
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)文章
js數(shù)組常見操作及數(shù)組與字符串相互轉(zhuǎn)化實(shí)例詳解
這篇文章主要介紹了js數(shù)組常見操作及數(shù)組與字符串相互轉(zhuǎn)化方法,以實(shí)例形式較為詳細(xì)的分析并總結(jié)了JavaScript數(shù)組的常見使用技巧與轉(zhuǎn)化方法,需要的朋友可以參考下2015-11-11
uniapp中scroll-view實(shí)現(xiàn)自動(dòng)滾動(dòng)到最底部的方法
這篇文章主要給大家介紹了關(guān)于uniapp中scroll-view實(shí)現(xiàn)自動(dòng)滾動(dòng)到最底部的相關(guān)資料,在uniapp日常開發(fā)的過程中經(jīng)常會(huì)有局部滾動(dòng)的需求,而scroll-view組件正好可以滿足這一需求,需要的朋友可以參考下2023-10-10
淺析jsopn跨域請(qǐng)求原理及cors(跨域資源共享)的完美解決方法
由于同源策略的緣故,ajax不能向不同域的網(wǎng)站發(fā)出請(qǐng)求。接下來通過本文給大家介紹jsopn跨域請(qǐng)求原理及cors(跨域資源共享)的完美解決方法,需要的朋友可以參考下2017-02-02
深入理解JavaScript的事件執(zhí)行機(jī)制
本文主要介紹了JavaScript的事件執(zhí)行機(jī)制,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-09-09
密碼強(qiáng)度檢測(cè)效果實(shí)現(xiàn)原理與代碼
密碼強(qiáng)度檢測(cè)有利于提醒增加密碼的安全指數(shù),更好的保護(hù)密碼安全,接下來介紹密碼強(qiáng)度檢測(cè)效果的實(shí)現(xiàn)2013-01-01

