转载自龙哥博客原文链接:(http://blog.sina.com.cn/369768231qq)
多个上传文件用js验证文件的格式和大小
html部分:
<dsp:form action="${originatingRequest.requestURI}" method="post" enctype="multipart/form-data">
<dsp:input type="file" bean="ReturngoodsFormHandler.uploadedFile1" id="uploadedFile1" value="" onchange="checkfile('uploadedFile1');"/>
<dsp:input type="file" bean="ReturngoodsFormHandler.uploadedFile2" id="uploadedFile2" value="" onchange="checkfile('uploadedFile2');"/>
<a class="btn_sprite btn_font14_red" href="javascript:;"><span>提交申请</span></a>
<dsp:input type="submit" style="display:none;" bean="ReturngoodsFormHandler.submitReturngoods" id="submitReturngoods" value="Add"/>
</dsp:form>
需要注意:上传文件要有一个id,然后onchage事件里加一个id的名称;
js部分:
//将验证的设置和错误信息抽离出来,有利于最后submit时候做判断
var flag=true;
var errorinfo="";
//验证文件的格式
function checkfile(filenames){
filename=document.getElementByIdx_x_x(filenames).value;
var re=/(.[.]bmp)$|(.[.]gif)$|(.[.]jpg)$|(.[.]png)$|(.[.]jpeg)$/i;
if (!re.test(filename)) {
errorinfo = "只支持bmp,gif,jpg,png,jpeg格式文件,请重新上传";
alert(errorinfo);
flag = false;
return false;
}
//验证文件的大小
if(document.getElementByIdx_x_x(filenames).size>8000){
errorinfo = "文件必须小于800KB,图片太大 size:"+document.getElementByIdx_x_x_x_x_x(filenames).size;
alert(errorinfo);
return false;
}
}
jQuery('.btn_font14_red').click(function(){
if(flag==true){
$("#submitReturngoods").click();
}else{
alert(errorinfo);
return false;
}
});
注意:这么做的好处是:第一:上传文件的时候,如果有错误,第一时间通知用户,用户去修改;
第二:如果用户最后填完了,虽然之前有提示语句,但是用户忘了是什么,点击提交的时候,仍然可以提示用户问题的原因。同时将错误信息和设置值放在最外面,而不用再次验证,可以节省页面效率。
(document.getElementByIdx_x_x(filenames) 不知道为啥发表的时候,总是多个_x,去又去不掉,大家在copy的时候记得去掉哈)
相关推荐
js 图片 验证上传图片 大小 格式
js验证上传swf格式的大小,服务器端用php做
下面小编就为大家带来一篇多个上传文件用js验证文件的格式和大小的方法(推荐)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
js验证上传文件大小
本篇介绍一个前端JS便捷判断上传文件大小的方法。 这个是比较好的 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> [removed] var isIE = /msie/i.test...
javascript 实现限制上传文件大小
JS上传文件大小验证 自己写的方法,不是完整控件。 可以拿去借鉴。
html前端技术,原生js上传文件,代码结构清晰、简短、易于理解,建议收藏。
js文件验证表单js文件验证表单js文件验证表单js文件验证表单
js控制上传文件的大小js控制上传文件的大小js控制上传文件的大小js控制上传文件的大小js控制上传文件的大小js控制上传文件的大小js控制上传文件的大小
js 上传图片 校验 文件类型 大小js 上传图片 校验 文件类型 大小js 上传图片 校验 文件类型 大小 js 上传文件校验 js 上传文件校验 js 上传文件校验
jQuery多文件上传并获取大小与格式代码</title> [removed][removed] [removed][removed] <link rel="stylesheet" href="style/uploadW.css?3.1.64"> </head> <body>[removed][removed]...
js判断上传文件大小 兼容大部分主流浏览器
由于项目需要,在网上找了一个JS判断上传文件大小的程序,经测试兼容IE6-9,Firefox10,Opera11.6,safari5.1,chrome17
主要介绍了JS获取文件大小的方法,结合实例总结分析了JavaScript获取文件大小的常用技巧,并给出了判断文件格式与大小的完整实例供读者参考,需要的朋友可以参考下
可以直接用的js,选择多个文件上传。代码少,功能多!
11 accept: 输入拥有合法后缀名的字符串(上传文件的后缀)。 12 maxlength:5 输入长度最多是 5 的字符串(汉字算一个字符)。 13 minlength:10 输入长度最小是 10 的字符串(汉字算一个字符)。 14 rangelength:[5,...
用js获取上传文件的大小,输入文件路径即可,在IE6上没问题,其他版本的浏览器没试过。
ExtJS验证文件上传类型,详细讲述ExtJS如何验证文件上传文件的类型!
能用的js上传单个文件源码,上传文件大小不限,并且带进度条显示。