<html>
<head>
<title>JS图片浏览并判断格式和大小 简单实例</title>
<style type="text/css">
.filebox
{
}
.imgbox
{
margin-top:20px;
width:350px;
height:300px;
text-align:center;
border:4px solid #ccc;
}
.imgbox img
{
padding:3px;
border:1px solid #ddd;
}
</style>
<!-- jquery 类库 -->
<script src="/js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
var MAXSIZE = 50 * 1024; //限制上传图片大小50K
var ERROR_IMGSIZE = "图片大小不能超过50K"; //图片大小限制信息
var isImg = true; //图片是否合格
/**Input file onchange事件* @params obj file对象* @return void**/
function checkFileChange(obj) {
var img = $(".img")[0];
var file = obj.value;
var exp = /.\.jpg|.\.gif|.\.png|.\.bmp/i;
if (exp.test(file)) {//验证格式
if ($.browser.msie) {//判断是否是IE
img.src = file;
if (sizeCheck(img)) {
return true;
}
alert(ERROR_IMGSIZE);
return false;
}
else {
if (sizeCheck(img)) {
img.src = obj.files[0].getAsDataURL();
return true;
}
alert(ERROR_IMGSIZE);
return false;
}
}
else {
alert("图片格式不正确");
}
/** sizeCheck 检查图片大小
* @params img 图片对象
* @return void **/
function sizeCheck(img) {
//初始化设置
if ($.browser.msie) {//IE
if (img.readyState == "complete") {
return img.fileSize <= MAXSIZE;
}
return false;
}
else {//非IE
return obj.files[0].fileSize <= MAXSIZE
}
}
}
</script>
</head>
<body>
<div id="main">
<input type="file" name="uploadImg" size="25" onchange="Javascript:checkFileChange(this);" />
<div class="imgbox">
<img src="imgs/nophoto.gif" class="img" alt="头像" />
</div>
</div>
</body>
</html>
- 1
- 2
- 3
前往页