<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>index</title>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var allowType = "jpg,gif,png";
var allowSize = 4;
var type = $("#type");
var size = $("#size");
var uploadSize = 0;
type.html("只允许上传<font color='#FF0000'>" + allowType + "</font>格式的图片");
size.html("大小不能超过<font color='#FF0000'>" + allowSize + "M</font>");
$("#file").change(function() {
var val = this.value
var ext = val.substring(val.length - 3, val.length);
if (allowType.indexOf(ext.toLowerCase()) < 0) {
alert("只允许上传" + allowType + "格式的图片\n该文件格式为"+ext.toLowerCase());
type.html("只允许上传<font color='#FF0000'>" + allowType + "</font>格式的图片");
size.html("大小不能超过<font color='#FF0000'>" + allowSize + "M</font>");
$("#area").html("等待上传");
return;
}
//火狐浏览器
if (this.files) {
var reader = new FileReader();
reader.onload = function(e) {
$("#pic").attr("src", e.target.result);
}
var file = this.files[0];
reader.readAsDataURL(file);
//火狐浏览器获取文件大小
uploadSize = file.size;
}
//IE和火狐浏览器获取文件大小，必须等图片加载完毕再获取
$("#pic").attr("src", this.value).load(function() {
//判断是否为IE浏览器
if (document.all) {
uploadSize = this.fileSize;
}
if (uploadSize > allowSize*1024*1024) {
alert("图片大小不能超过" + allowSize + "M" + "\n该图片大小" + Math.round(uploadSize /(1024 * 1024)*1000)/1000 + "M");
type.html("只允许上传<font color='#FF0000'>" + allowType + "</font>格式的图片");
size.html("大小不能超过<font color='#FF0000'>" + allowSize + "M</font>");
$("#area").html("等待上传");
return;
}else{
$("#type").html(ext.toLowerCase());
$("#size").html(Math.round(uploadSize /(1024 * 1024)*1000)/1000+"M");
$("#area").html("width：" + $("#pic").width() + "px<br />height：" + $("#pic").height() + "px");
}
});
});
});
</script>
<style type="text/css">
td {
border: 1px #000 solid;
padding: 5px;
margin: 0;
font-size: 14px;
}
</style>
</head>
<body>
<input type="file" id="file" />
<table cellspacing="0">
<tr>
<td>图片格式</td>
<td id="type">等待上传</td>
</tr>
<tr>
<td>图片大小</td>
<td id="size">等待上传</td>
</tr>
<tr>
<td>图片尺寸</td>
<td id="area">等待上传</td>
</tr>
</table>
<img id="pic" alt="图片预览区" src="">
</body>
</html>
