多个上传文件用js验证文件的格式和大小的方法(推荐)


Posted in Javascript onMarch 09, 2017

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:;" rel="external nofollow" ><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验证文件的格式和大小的方法(推荐)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 日历提醒系统( 兼容所有浏览器 )
Apr 07 Javascript
JavaScript 学习笔记(十四) 正则表达式
Jan 22 Javascript
浅谈javascript的数据类型检测
Jul 10 Javascript
jQuery在html有效在jsp无效的原因及解决方法
Aug 02 Javascript
JavaScript控制两个列表框listbox左右交换数据的方法
Mar 18 Javascript
JavaScript实现数字数组按照倒序排列的方法
Apr 06 Javascript
Node.js 数据加密传输浅析
Nov 16 Javascript
纯javascript版日历控件
Nov 24 Javascript
利用JS判断字符串是否含有数字与特殊字符的方法小结
Nov 25 Javascript
浅谈JavaScript_DOM学习篇_图片切换小案例
Mar 19 Javascript
浅谈layer的Icon样式以及一些常用的layer窗口使用方法
Sep 11 Javascript
vue 中url 链接左边的小图标更改问题
Dec 30 Javascript
jQuery实现字符串全部替换的方法【推荐】
Mar 09 #Javascript
js获取json中key所对应的value值的简单方法
Jun 17 #Javascript
ng2学习笔记之bootstrap中的component使用教程
Mar 09 #Javascript
Angular.js中处理页面闪烁的方法详解
Mar 09 #Javascript
jQuery插件HighCharts实现的2D对数饼图效果示例【附demo源码下载】
Mar 09 #Javascript
JS实现课堂随机点名和顺序点名
Mar 09 #Javascript
JavaScript实现两个select下拉框选项左移右移
Mar 09 #Javascript
You might like
自制短波长线天线频率预选器 - 成功消除B2K之流的镜像
2021/03/02 无线电
使用PHP强制下载PDF文件示例
2014/01/17 PHP
PHP循环结构实例讲解
2014/02/10 PHP
php中的strpos使用示例
2014/02/27 PHP
laravel 实现设置时区的简单方法
2019/10/10 PHP
Code:loadScript( )加载js的功能函数
2007/02/02 Javascript
js对字符的验证方法汇总
2015/02/04 Javascript
jQuery中使用each处理json数据
2015/04/23 Javascript
javascript实现网页中涉及的简易运动(改变宽高、透明度、位置)
2015/11/29 Javascript
javascript中replace使用方法总结
2017/03/01 Javascript
JavaScript数据结构之优先队列与循环队列实例详解
2017/10/27 Javascript
js中null与空字符串&quot;&quot;的区别讲解
2019/01/17 Javascript
Node.js系列之连接DB的方法(3)
2019/08/30 Javascript
利用python代码写的12306订票代码
2015/12/20 Python
浅谈Python 字符串格式化输出(format/printf)
2016/07/21 Python
Python 搭建Web站点之Web服务器网关接口
2016/11/06 Python
Python3利用SMTP协议发送E-mail电子邮件的方法
2017/09/30 Python
python分布式环境下的限流器的示例
2017/10/26 Python
python使用生成器实现可迭代对象
2018/03/20 Python
Python3 实现随机生成一组不重复数并按行写入文件
2018/04/09 Python
python读写配置文件操作示例
2019/07/03 Python
python接口调用已训练好的caffe模型测试分类方法
2019/08/26 Python
python中property属性的介绍及其应用详解
2019/08/29 Python
tornado+celery的简单使用详解
2019/12/21 Python
Python 炫技操作之合并字典的七种方法
2020/04/10 Python
python3发送request请求及查看返回结果实例
2020/04/30 Python
简单了解如何封装自己的Python包
2020/07/08 Python
伦敦最受欢迎的蛋糕店:Konditor & Cook
2019/11/01 全球购物
女儿十岁生日答谢词
2014/01/27 职场文书
商场消防演习方案
2014/02/12 职场文书
会计电算化专业自荐信
2014/03/15 职场文书
社区党的群众路线教育实践活动总结材料
2014/10/31 职场文书
2015社区六五普法工作总结
2015/04/21 职场文书
2015年音乐教研组工作总结
2015/07/22 职场文书
婚宴领导致辞
2015/07/28 职场文书
python中validators库的使用方法详解
2022/09/23 Python