多个上传文件用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 相关文章推荐
静态的动态续篇之来点XML
Aug 15 Javascript
jQueryPad 实用的jQuery测试工具(支持IE,chrome,FF)
May 22 Javascript
jquery+ajax每秒向后台发送请求数据然后返回页面的代码
Jan 17 Javascript
一些实用的jQuery代码片段收集
Jul 12 Javascript
jQuery的12招常用技巧分享
Aug 08 Javascript
js新闻滚动 js如何实现新闻滚动效果
Jan 07 Javascript
HTML长文本截取含有HTML代码同样适用的两种方法
Jul 31 Javascript
javascript实现存储hmtl字符串示例
Apr 25 Javascript
JS实现登录页面记住密码和enter键登录方法推荐
May 10 Javascript
node.js学习之事件模块Events的使用示例
Sep 28 Javascript
AngularJS基于MVC的复杂操作实例讲解
Dec 31 Javascript
vue项目webpack中Npm传递参数配置不同域名接口
Jun 15 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 全局变量范围分析
2009/08/07 PHP
简单PHP会话(session)说明介绍
2016/08/21 PHP
PHP快速排序quicksort实例详解
2016/09/28 PHP
Laravel程序架构设计思路之使用动作类
2018/06/07 PHP
thinkPHP框架中layer.js的封装与使用方法示例
2019/01/18 PHP
(currentStyle)javascript为何有时用style得不到已设定的CSS的属性
2007/08/15 Javascript
js利用div背景,做一个竖线的效果。
2008/11/22 Javascript
Jquery cookie操作代码
2010/03/14 Javascript
将HTMLCollection/NodeList/伪数组转换成数组的实现方法
2011/06/20 Javascript
将json当数据库一样操作的javascript lib
2013/10/28 Javascript
JS不用正则验证输入的字符串是否为空(包含空格)的实现代码
2016/06/14 Javascript
Javascript中indexOf()和lastIndexOf应用方法实例
2016/08/24 Javascript
常用的js方法合集
2017/03/10 Javascript
angularjs指令之绑定策略(@、=、&amp;)
2017/04/13 Javascript
package.json各个属性说明详解
2020/03/11 Javascript
微信小程序的引导页实现代码
2020/06/24 Javascript
[02:16]卖萌的僵尸 DOTA2神话信使飞僵小宝来袭
2014/03/24 DOTA
动态创建类实例代码
2009/10/07 Python
解决Mac下首次安装pycharm无project interpreter的问题
2018/10/29 Python
PyTorch 1.0 正式版已经发布了
2018/12/13 Python
对Python3.x版本print函数左右对齐详解
2018/12/22 Python
SmartBuyGlasses丹麦:网上购买名牌太阳镜、眼镜和隐形眼镜
2016/10/01 全球购物
南非最大的花卉和送礼服务:NetFlorist
2017/09/13 全球购物
欧洲最大的品牌水上运动服装和设备在线零售商:Wuituit Outlet
2018/05/05 全球购物
美国在线眼镜店:GlassesShop
2018/11/15 全球购物
如何设定的weblogic的热启动模式(开发模式)与产品发布模式
2012/09/08 面试题
大学生职业生涯规划书模板
2014/01/03 职场文书
网络研修随笔感言
2014/02/17 职场文书
公司周年庆典策划方案
2014/05/17 职场文书
会计求职简历自我评价
2015/03/10 职场文书
文艺部部长竞选稿
2015/11/21 职场文书
2016小学优秀教师先进事迹材料
2016/02/26 职场文书
Idea连接MySQL数据库出现中文乱码的问题
2021/04/14 MySQL
Redis中有序集合的内部实现方式的详细介绍
2022/03/16 Redis
Python matplotlib 利用随机函数生成变化图形
2022/04/26 Python
HTML5之高度塌陷问题的解决
2022/06/01 HTML / CSS