<!DOCTYPE?html?>
<html?xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta?http-equiv="Content-Type"?content="text/html;?charset=gb2312"?/>
<title></title>
<script?type="text/javascript">
var?maxSize?=?2*1024*1024;//定義最大為2M。
var?errMsg?=?"上傳的附件文件不能超過2M！";
var?tipMsg?=?"您的瀏覽器暫不支持計算上傳文件的大小，確保上傳文件不要超過2M，建議使用IE、FireFox、Chrome瀏覽器。";
var?browserCfg?=?{};
var?ua?=?window.navigator.userAgent;
//?ie瀏覽器
if?(ua.indexOf("MSIE")?>=?1){
browserCfg.ie?=?true;
}else?if(ua.indexOf("Trident")?>=?1){
browserCfg.ie11?=?true;
}
//?火狐瀏覽器
else?if(ua.indexOf("Firefox")?>=?1){
browserCfg.firefox?=?true;
}
//?谷歌瀏覽器
else?if(ua.indexOf("Chrome")?>=?1){
browserCfg.chrome?=?true;
}
/**
?*?獲取圖片的尺寸
?*/
function?getImageWAndH(){
var?w?=?0;
var?h?=?0;
var?size?=?0;
????var?pic?=?document.getElementById("pic");
var?picValue?=?pic.value;
????var?img?=?new?Image();
????img.onload?=?function(){//再綁定onload事件
img.onload?=?null;//解除onload事件
????????w?=?img.width;
h?=?img.height;
alert(w?+?"-1-"?+?h);
????};
????img.src?=?picValue;
//?防止img未加載完成，重新獲取尺寸
if(w?==?0?||?h?==?0){
w?=?img.width;
h?=?img.height;
alert(w?+?"-2-"?+?h);
}
size?=?getImageSize(pic);
alert(w?+?"-3-"?+?h);
//?獲取img.onload事件中賦值的參數，需要延遲加載一下
setTimeout(function(){
alert("寬："?+?w?+?"-高："?+?h?+?"-大?。??+?size);
},10);
}
/**
?*?獲取圖片的大小
?*/
function?getImageSize(obj){
try{
var?fileSize?=?0;
//?如果當前瀏覽器為火狐或者chrome或者為ie11
if(browserCfg.firefox?||?browserCfg.chrome?||?browserCfg.ie11){
fileSize?=?obj.files[0].size;
}
//?如果當前瀏覽器為ie
else?if(browserCfg.ie){
//?img標簽（jsp頁面中一定要有）負責獲取文件大小
var?imgTag?=?document.getElementById('img');
imgTag.dynsrc=obj.value;
fileSize?=?imgTag.fileSize;
}
//?如果當前瀏覽器不為谷歌火狐或者ie，則提示
else{
return?tipMsg;
}
if(fileSize==-1){
return?tipMsg;
}else?if(fileSize?>?maxSize){
return?errMsg;
}else{
return?fileSize?+?"?B大小";
}
}catch(e){
return?"錯誤了";
}
}
</script>
</head>
?
<body>
<input?type="file"?id="pic"?/>
<img?id="img"?style="display:none">
<input?type="button"?value="上傳"?onclick="getImageWAndH()"?/>
</body>
</html>目前在我本地ie下可以正常獲取大小、尺寸，但是別人的ie下獲取不了大小，而且在chrome中能獲取大小，但是獲取不了尺寸。請教各位前端前輩。。。請指教，很著急
js獲取上傳文件選中的圖片大小、尺寸，需要兼容ie6+、chrome、ff
慕冬雪
2015-12-03 11:51:30
