前端上传图片时,我们大多选择使用写好的组件来上传图片;但在应用过程中,有些框架就没有提供判断图片大小的方法,那么久需要我们自己用js实现。
针对浏览器内核的不同,我们判断图片大小的方法也不一样;所以,下面的代码可以应用在大多数市场份额的浏览器上。
大多数的验证并不是读取图片后判断其大小,而是用一种简便巧妙的方法读取文件所在本地系统中的大小属性。
下面看代码示例:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="DEscription" contect="my code demo" />
<meta name="Author" contect="Michael@www.micmiu.com" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js check file size @ www.micmiu.com</title>
</head>
<body>
<img id="tempimg" dynsrc="" src="" style="display:none" />
<input type="file" name="file" id="fileuploade" size="40" />
<input type="button" name ="check" value="checkfilesize" onclick="checkfile()"/>
记住上面表单的两个id,tempimg 和 fileuploade 后面我们将要使用这两个id
</body>
<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;
if (ua.indexOf("MSIE")>=1){
browserCfg.ie = true;
}else if(ua.indexOf("Firefox")>=1){
browserCfg.firefox = true;
}else if(ua.indexOf("Chrome")>=1){
browserCfg.chrome = true;
}else {//其他浏览器大多是跟火狐一样的内核
browserCfg.firefox = true;
}
function checkfile(){
try{
var obj_file = document.getElementById("fileuploade");
if(obj_file.value==""){
alert("请先选择上传文件");
return;
}
var filesize = 0;
if(browserCfg.firefox || browserCfg.chrome ){
filesize = obj_file.files[0].size;
}else if(browserCfg.ie){
var obj_img = document.getElementById('tempimg');
obj_img.dynsrc=obj_file.value;
filesize = obj_img.fileSize;
}else{
alert(tipMsg);
return;
}
if(filesize==-1){
alert(tipMsg);
return;
}else if(filesize>maxsize){
alert(errMsg);
return;
}else{
alert("文件大小符合要求");
return;
}
}catch(e){
alert(e);
}
}
</script>
</html>
原文参照:http://zhuchengzzcc.iteye.com/blog/1573360
分享到:
相关推荐
js 图片 验证上传图片 大小 格式
Javascript验证上传图片大小[前台处理]_.docx
js验证上传文件大小
上传图片大小验证方法 非完整控件 如需要可以加入正则表达式来判断上传文件扩展名
js验证上传swf格式的大小,服务器端用php做
JS上传文件大小验证 自己写的方法,不是完整控件。 可以拿去借鉴。
2)前台处理: 也就是利用Javascript获取该图片大小。 显然第一种方式,很不好。因为需要把文件先上传到服务器上,如果文件很大的话,在加上网不是很快,需要等待好长时间,治标不治本。 功能解析: 在这里我只介绍...
项目中经常用到需要上传文件、照片等功能,同时需要限制所上传文件的大小。很多插件都会采用后台请求验证,前端Js校验比较少。本篇介绍一个前端JS便捷判断上传文件大小的方法。 这个是比较好的 <html> <...
需求分析: 在做上传图片的时候,如果不限制上传图片大小,后果非常的严重。那么我们怎样才可以解决一个棘手的问题呢?有两种方式: 1)后台处理: 也就是AJAX POST提交到后台,把图片上传到服务器上,然后获得该图片...
主要介绍了js验证上传图片的方法,可对上传图片的类型、大小等进行限制,非常简单实用,需要的朋友可以参考下
下面小编就为大家带来一篇真正好用的js验证上传文件大小的简单方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
在公司工作之余,将遇到的一些问题整理出来。本来是想写博客之类的,但是想想还是算了,毕竟从没写过,还是上传文档吧。
今天整理了一段代码,用于图片上传前预览,并获取图片的长、宽、及字节数,可以用于图片上传前的校验。
js 验证上传图片 代码如下: var ImgObj=new Image();//建立一个图像对象 varAllImgExt=”.jpg|.jpeg|.gif|.bmp|.png|”//全部图片格式类型 varFileObj,ImgFileSize,ImgWidth,ImgHeight,FileExt,ErrMsg,FileMsg,IsImg...
js控制图片大小,并验证图片类型,兼容各浏览器,测试可用
在网上真得好难找到一个能在网页上对视频进行上传大小的拦截与阻止的控件。在服务器端作验证又太麻烦。现在终于有了一个解决方案纯javascript解决方案。
下面小编就为大家带来一篇多个上传文件用js验证文件的格式和大小的方法(推荐)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧