<!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中能获取大小，但是获取不了尺寸。请教各位前端前辈。。。请指教，很着急
2 回答
已采纳
一毛钱
TA贡献156条经验 获得超57个赞
这是浏览器的安全问题，是你获取的文件路径不是真实的路径，这种问题处理方法，有两种
上传文件到指定的目录，然后再进行相关的操作（推荐使用这种方式）
设置浏览器的安全性，具体设置：选中浏览器的工具 -> Internet选项 -> 安全 -> 自定义级别 -> 找到“其他”中的“将本地文件上载至服务器时包含本地目录路径”，选中“启用”就能解决问题。
添加回答
举报
0/150
提交
取消