多个上传文件用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 相关文章推荐
jQuery 1.0.4 - New Wave Javascript(js源文件)
Jan 15 Javascript
javascript编程起步(第四课)
Feb 27 Javascript
使用JavaScript switch case 另类写法
Mar 14 Javascript
一个简单的网站访问JS计数器 刷新1次加1次访问
Sep 20 Javascript
使用jquery局部刷新(jquery.load)从数据库取出数据
Jan 22 Javascript
Seajs的学习笔记
Mar 04 Javascript
javascript数组操作方法小结和3个属性详细介绍
Jul 05 Javascript
jQuery团购倒计时特效实现方法
May 07 Javascript
jQuery实现带延迟效果的滑动菜单代码
Sep 02 Javascript
浅谈基于Vue.js的移动组件库cube-ui
Dec 20 Javascript
vue学习教程之带你一步步详细解析vue-cli
Dec 26 Javascript
JavaScript函数重载操作实例浅析
May 02 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
神族 Protoss 剧情介绍
2020/03/14 星际争霸
咖啡的化学
2021/03/03 咖啡文化
PHP随机生成唯一HASH值自定义函数
2015/04/20 PHP
Yii2使用swiftmailer发送邮件的方法
2016/05/03 PHP
php封装的数据库函数与用法示例【参考thinkPHP】
2016/11/08 PHP
php获取当前url地址的方法小结
2017/01/10 PHP
thinkPHP实现基于ajax的评论回复功能
2018/06/22 PHP
DOM 基本方法
2009/07/18 Javascript
浏览器常用高宽的jquery插件
2011/02/24 Javascript
JS获得URL超链接的参数值实例代码
2013/06/21 Javascript
JS调用CS里的带参方法实例
2013/08/01 Javascript
HTML页面滚动时获取离页面顶部的距离2种实现方法
2013/09/05 Javascript
js对象基础实例分析
2015/01/13 Javascript
JavaScript使表单中的内容显示在屏幕上的方法
2015/06/29 Javascript
JS实现DIV容器赋值的方法
2015/12/14 Javascript
jQuery ztree实现动态树形多选菜单
2016/08/12 Javascript
jQuery实现锚点向下平滑滚动特效示例
2017/08/29 jQuery
浅谈Vue SPA 首屏加载优化实践
2017/12/15 Javascript
详解Webpack+Babel+React开发环境的搭建的方法步骤
2018/01/09 Javascript
vue如何在自定义组件中使用v-model
2018/05/14 Javascript
RequireJS用法简单示例
2018/08/20 Javascript
Node.js之readline模块的使用详解
2019/03/25 Javascript
小程序中使用css var变量(使js可以动态设置css样式属性)
2020/03/31 Javascript
[50:28]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 Newbee vs KG
2018/04/01 DOTA
Python中os.path用法分析
2015/01/15 Python
Python学习之用pygal画世界地图实例
2017/12/07 Python
python虚拟环境迁移方法
2019/01/03 Python
Python3 pandas 操作列表实例详解
2019/09/23 Python
Python 列表反转显示的四种方法
2020/11/16 Python
Django通过设置CORS解决跨域问题
2020/11/26 Python
趣天网日本站:Qoo10 JP
2019/09/18 全球购物
美德好少年事迹材料
2014/01/19 职场文书
学校社团活动总结
2015/05/07 职场文书
从严治党主题教育活动总结
2015/05/07 职场文书
《棉鞋里的阳光》教学反思
2016/02/20 职场文书
MySQL下使用Inplace和Online方式创建索引的教程
2021/05/26 MySQL