多个上传文件用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 Array.remove() 数组删除
Aug 06 Javascript
GreyBox技术总结(转)
Nov 23 Javascript
js函数返回多个返回值的示例代码
Nov 05 Javascript
使用jquery.qrcode生成彩色二维码实例
Aug 08 Javascript
vue插件vue-resource的使用笔记(小结)
Aug 04 Javascript
JS基于正则表达式实现的密码强度验证功能示例
Sep 21 Javascript
vue小白入门教程
Apr 02 Javascript
centos 上快速搭建ghost博客方法分享
May 23 Javascript
一文快速了解JQuery中的AJAX
May 31 jQuery
浅谈react-router@4.0 使用方法和源码分析
Jun 04 Javascript
JavaScript实现单图片上传并预览功能
Sep 30 Javascript
原生javascript制作的拼图游戏实现方法详解
Feb 23 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
php木马攻击防御之道
2008/03/24 PHP
php与php MySQL 之间的关系
2009/07/17 PHP
PHP调用MsSQL Server 2012存储过程获取多结果集(包含output参数)的详解
2013/07/03 PHP
ThinkPHP跳转页success及error模板实例教程
2014/07/17 PHP
Yii框架自定义数据库操作组件示例
2019/11/11 PHP
关于实现代码语法标亮 dp.SyntaxHighlighter
2007/02/02 Javascript
JS getStyle获取最终样式函数代码
2010/04/01 Javascript
JavaScript Scoping and Hoisting 翻译
2012/07/03 Javascript
高性能JavaScript模板引擎实现原理详解
2015/02/05 Javascript
JavaScript实现按照指定长度为数字前面补零输出的方法
2015/03/19 Javascript
JavaScript使用cookie记录临时访客信息的方法
2015/04/07 Javascript
js限制文本框只能输入中文的方法
2015/08/11 Javascript
基于JavaScript实现瀑布流效果
2017/03/29 Javascript
jQuery实现拖动效果的实例代码
2017/06/25 jQuery
微信小程序之网络请求简单封装实例详解
2017/06/28 Javascript
ES6中新增的Object.assign()方法详解
2017/09/22 Javascript
jQuery实现常见的隐藏与展示列表效果示例
2018/06/04 jQuery
Nuxt.js的路由跳转操作(页面跳转nuxt-link)
2020/11/06 Javascript
python得到一个excel的全部sheet标签值方法
2018/12/10 Python
python实现定时发送qq消息
2019/01/18 Python
pyinstaller打包单个exe后无法执行错误的解决方法
2019/06/21 Python
Python占用的内存优化教程
2019/07/28 Python
Python Django中间件,中间件函数,全局异常处理操作示例
2019/11/08 Python
Python datetime 格式化 明天,昨天实例
2020/03/02 Python
在Django中预防CSRF攻击的操作
2020/03/13 Python
基于pycharm 项目和项目文件命名规则的介绍
2021/01/15 Python
Puccini乌克兰:购买行李箱、女士手袋网上商店
2020/08/06 全球购物
static全局变量与普通的全局变量有什么区别?static局部变量和普通局部变量有什么区别?static函数与普通函数有什么区别?
2015/02/22 面试题
Solaris操作系统的线程机制
2012/12/23 面试题
高中毕业自我鉴定
2013/12/19 职场文书
正风肃纪剖析材料
2014/02/18 职场文书
文体活动总结
2015/02/04 职场文书
兼职安全员岗位职责
2015/02/15 职场文书
十大经典日本动漫排行榜 海贼王第三,犬夜叉仅第八
2022/03/18 日漫
关于python3 opencv 图像二值化的问题(cv2.adaptiveThreshold函数)
2022/04/04 Python
vue递归实现树形组件
2022/07/15 Vue.js