<html>
<head>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<input type="file" id="fileUpload" />
<input id="upload" type="button" value="Upload" />
<script type="text/javascript">
$(function () {
$("#upload").bind("click", function () {
//获得FileUpload参数
var fileUpload = $("#fileUpload")[0];
//检测文件是否有效图片
var regex = new RegExp("([a-zA-Z0-9\s_\\.\-:])+(.jpg|.png|.gif)$");
if (regex.test(fileUpload.value.toLowerCase())) {
//检测是否支持HTML5
if (typeof (fileUpload.files) != "undefined") {
//初始化FileReader对象
var reader = new FileReader();
//读取图片文件
reader.readAsDataURL(fileUpload.files[0]);
reader.onload = function (e) {
//初始化JavaScript图片对象
var image = new Image();
//FileReader获得Base64字符串
image.src = e.target.result;
image.onload = function () {
//获得图片高宽
var height = this.height;
var width = this.width;
alert("图片高=" + height + "px, 宽=" + width + "px");
return true;
};
}
}
else {
alert("浏览器不支持HTML5.");
return false;
}
}
else {
alert("请选择有效的图片文件");
return false;
}
});
});
</script>
</body>
</html>
注意点:一定要在图片加载完成事件(onload)中获取图片大小