多个上传文件用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 相关文章推荐
发现的以前不知道的函数
Sep 19 Javascript
用JavaScript将从数据库中读取出来的日期型格式化为想要的类型。
Aug 15 Javascript
基于JQUERY的两个ListBox子项互相调整的实现代码
May 07 Javascript
sencha touch 模仿tabpanel导航栏TabBar的实例代码
Oct 24 Javascript
jquery easyui中treegrid用法的简单实例
Feb 18 Javascript
jquery 隐藏与显示tr标签示例代码
Jun 06 Javascript
JQuery获取与设置HTML元素的内容或文本的实现代码
Jun 20 Javascript
javascript遇到html5的一些表单属性
Jul 05 Javascript
jquery插件canvaspercent.js实现百分比圆饼效果
Jul 18 jQuery
ztree简介_动力节点Java学院整理
Jul 19 Javascript
cocos2dx+lua实现橡皮擦功能
Dec 20 Javascript
详解uniapp的全局变量实现方式
Jan 11 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里array_work用法实例分析
2015/07/13 PHP
PHP单例模式是什么 php实现单例模式的方法
2016/05/14 PHP
浅谈PHP链表数据结构(单链表)
2016/06/08 PHP
Thinkphp5.0 框架的请求方式与响应方式分析
2019/10/14 PHP
js 实现图片预加载(js操作 Image对象属性complete ,事件onload 异步加载图片)
2011/03/25 Javascript
使用jQuery快速解决input中placeholder值在ie中无法支持的问题
2014/01/02 Javascript
Js表格万条数据瞬间加载实现代码
2014/02/20 Javascript
DOM 事件流详解
2015/01/20 Javascript
JSONP之我见
2015/03/24 Javascript
js实现div层缓慢收缩与展开的方法
2015/05/11 Javascript
jQuery操作Table技巧大汇总
2016/01/23 Javascript
全面理解JavaScript中的闭包
2016/05/12 Javascript
Node.js设置CORS跨域请求中多域名白名单的方法
2017/03/28 Javascript
在百度搜索结果中去除掉一些网站的资料(通过js控制不让显示)
2017/05/02 Javascript
vue单个组件实现无限层级多选菜单功能
2018/04/10 Javascript
bootstrap select2插件用ajax来获取和显示数据的实例
2018/08/09 Javascript
如何安装控制器JavaScript生成插件详解
2018/10/21 Javascript
vue中slot(插槽)的介绍与使用
2018/11/12 Javascript
Vue SPA 初次进入加载动画实现代码
2019/11/14 Javascript
详解Node.js使用token进行认证的简单示例
2020/05/25 Javascript
Nuxt的路由配置和参数传递方式
2020/11/06 Javascript
vue实现动态表格提交参数动态生成控件的操作
2020/11/09 Javascript
jQuery实现简单弹幕制作
2020/12/10 jQuery
pyhton中__pycache__文件夹的产生与作用详解
2019/11/24 Python
python如何遍历指定路径下所有文件(按按照时间区间检索)
2020/09/14 Python
Python3如何使用tabulate打印数据
2020/09/25 Python
WatchShop法国:英国排名第一的独立手表零售商
2020/02/17 全球购物
自我反省检讨书
2014/01/23 职场文书
婚庆答谢词
2015/01/04 职场文书
个人德育工作总结
2015/03/05 职场文书
2015年乡镇发展党员工作总结
2015/03/31 职场文书
工程质量保证书
2015/05/09 职场文书
公司回复函格式
2015/07/14 职场文书
为什么中国式养孩子很累?
2019/08/07 职场文书
Spring中bean的生命周期之getSingleton方法
2021/06/30 Java/Android
实现AJAX异步调用和局部刷新的基本步骤
2022/03/17 Javascript