图片上传之前检查大小、尺寸、格式并预览的js代码

更新时间：2008年10月18日 22:21:00 作者：

就是在客户端判断上传图片的大小，尺寸，并生成预览图，用JavaScript实现的啊

下面的代码，需要保存到本地种执行，在线看不到实际效果。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>validate before upload by Lance Zhang</title> </head> <body style="font-family:Calibri"> <form name="Myform"> <p> <font color="red" size="6">File type :gif,jpg,jpeg,png,bmp</font></p> <p> File Size limit: <input type="text" size="4" value="100" name="fileSizeLimit" id="fileSizeLimit" /> K</p> <p> Image Height Limit: <input type="text" size="4" value="100" name="heightLimit" id="heightLimit" /> </p> <p> Image Width Limit: <input type="text" size="4" value="100" name="widthLimit" id="widthLimit" /> </p> <p> <input type="file" name="photo" onchange="changeSrc(this)" /> Image Preview<img src="about:blank" id="fileChecker" name="fileChecker" alt="test" /> </p> <p> <input type="submit" value="submit"> </p> </form> <script type="text/javascript"> function CheckFileSize() { var limit = document.getElementById("fileSizeLimit").value * 1024; var width = document.getElementById("widthLimit").value ; var height = document.getElementById("heightLimit").value; if (oFileChecker.fileSize > limit) { alert("FileSize :"+oFileChecker.fileSize+"byte--too large!"); } else { alert("FileSize :"+oFileChecker.fileSize+"byte--ok"); } if( oFileChecker.height> height) { alert("ImageHeight :"+oFileChecker.height+"--too height!"); } else { alert("ImageHeight :"+oFileChecker.height+"--ok"); } if(oFileChecker.width> width) { alert("ImageWidth :"+oFileChecker.width+"--too width!"); } else { alert("ImageWidth :"+oFileChecker.width+"--ok"); } return false; } var right_type=new Array(".gif",".jpg",".jpeg",".png",".bmp"); var oFileChecker = document.getElementById("fileChecker"); function changeSrc(filePicker) { if(!checkImgType(filePicker.value)) { alert("the file type is not correct"); return; } oFileChecker.src = filePicker.value; } oFileChecker.onreadystatechange = function () { if (oFileChecker.readyState == "complete") { CheckFileSize(); } } function checkImgType(fileURL) { var right_typeLen=right_type.length; var imgUrl=fileURL.toLowerCase(); var postfixLen=imgUrl.length; var len4=imgUrl.substring(postfixLen-4,postfixLen); var len5=imgUrl.substring(postfixLen-5,postfixLen); for (i=0;i<right_typeLen;i++) { if((len4==right_type[i])||(len5==right_type[i])) { return true; } } } </script> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

来自国外的一款Js图片浏览效果
国外的Js图片浏览效果，在国外的一些网站见到的比较多，国内人都喜允左右箭头控制，用缩略图控制其它更合理呢，因此本代码重新优化一下还是很适合使用的呢。
2010-07-07
javascript检测(控制 )上传文件大小
用户客户端检测图片的大小，实际应用中，服务器端测试仍必不可少。
2009-12-12
真正的连续滚动图片
真正的连续滚动图片...
2006-09-09
映彩衣的js随笔(js图片切换效果)
最近写的一个关于图片切换的js，拿出来和大家分享一下
2011-07-07
jb51站长推荐的用js实现的多浏览器支持的图片轮换展示效果ie,firefox
jb51站长推荐的用js实现的多浏览器支持的图片轮换展示效果ie,firefox...
2007-03-03
jQuery.lazyload+masonry改良图片瀑布流代码
这里主要是使用jQuery.lazyload配合masonry实现瀑布流的重新排列，有时候网站的速度慢，图片加载慢，获取不到图片的宽度和高度，所以使用lazyload可以在图片加载完之后，进行瀑布流的重新排列。
2014-06-06
图片上传之前检查大小、尺寸、格式并预览的js代码
就是在客户端判断上传图片的大小，尺寸，并生成预览图，用JavaScript实现的啊
2008-10-10
javascript实现网站顶部出现几秒后图片缓慢消失的效果
快过年了，很多网站首页都放上了新春的祝福，有些是直接换成皮肤了，而有些则是用一张很大的图片放在网站顶部，在倒数几秒后，缓慢升上去直到最后消失。
2011-01-01
纯js无flash仿搜狐女人频道FLASH图片切换效果代码
2008-01-01
用new Image()预先加载图片真的有用吗？
用new Image()预先加载图片真的有用吗？...
2007-09-09