js获取上传文件选中的图片大小、尺寸，需要兼容ie6+、chrome、ff

<!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中能获取大小，但是获取不了尺寸。请教各位前端前辈。。。请指教，很着急

慕冬雪

浏览 3699回答 2

2回答

一毛钱

这是浏览器的安全问题，是你获取的文件路径不是真实的路径，这种问题处理方法，有两种上传文件到指定的目录，然后再进行相关的操作（推荐使用这种方式）设置浏览器的安全性，具体设置：选中浏览器的工具 -> Internet选项 -> 安全 -> 自定义级别 -> 找到“其他”中的“将本地文件上载至服务器时包含本地目录路径”，选中“启用”就能解决问题。

0 0

随时随地看视频慕课网APP