多个上传文件用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 相关文章推荐
XHTML下,JS浮动代码失效的问题
Nov 12 Javascript
理解Javascript_03_javascript全局观
Oct 11 Javascript
通过下拉框的值来确定输入框是否可以为空的代码
Oct 18 Javascript
JS正则中的RegExp对象对象
Nov 07 Javascript
js中创建对象的几种方式示例介绍
Jan 26 Javascript
js数组方法扩展实现数组统计函数
Apr 09 Javascript
JavaScript实现在数组中查找不同顺序排列的字符串
Sep 26 Javascript
JavaScript中的console.log()函数详细介绍
Dec 29 Javascript
jquery制作LED 时钟特效
Feb 01 Javascript
全面解析Bootstrap弹窗的实现方法
Dec 01 Javascript
JavaScript组件开发之输入框加候选框
Mar 10 Javascript
JavaScript进阶(三)闭包原理与用法详解
May 09 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/15 PHP
PHP中文件上传的一个问题
2010/09/04 PHP
php数组函数序列之array_key_exists() - 查找数组键名是否存在
2011/10/29 PHP
PHP实现求解最长公共子串问题的方法
2017/11/17 PHP
FormValid0.5版本发布,带ajax自定义验证例子
2007/08/17 Javascript
JS获取dom 对象 ajax操作 读写cookie函数
2009/11/18 Javascript
Javascript类库的顶层对象名用户体验分析
2010/10/24 Javascript
js控制CSS样式属性语法对照表
2012/12/11 Javascript
jquery插件开发之实现md5插件
2014/03/17 Javascript
jQuery获得子元素个数的方法
2015/04/14 Javascript
javascript清空table表格的方法
2015/05/14 Javascript
JavaScript数组对象赋值用法实例
2015/08/04 Javascript
JS给Textarea文本框添加行号的方法
2015/08/20 Javascript
深入浅析JSON.parse()、JSON.stringify()和eval()的作用详解
2016/04/03 Javascript
jQuery+ajax简单实现文件上传的方法
2016/06/03 Javascript
JavaScript中如何使用cookie实现记住密码功能及cookie相关函数介绍
2016/11/10 Javascript
微信小程序 实现列表项滑动显示删除按钮的功能
2017/04/13 Javascript
Vim快速合并行及vim 将文件所有行合并到一行
2017/11/27 Javascript
在Vue中创建可重用的 Transition的方法
2020/06/02 Javascript
详解JavaScript 的执行机制
2020/09/18 Javascript
如何利用 JS 脚本实现网页全自动秒杀抢购功能
2020/10/12 Javascript
从django的中间件直接返回请求的方法
2018/05/30 Python
基于Python中求和函数sum的用法详解
2018/06/28 Python
python模块之subprocess模块级方法的使用
2019/03/26 Python
Python列表的切片实例讲解
2019/08/20 Python
python rsa实现数据加密和解密、签名加密和验签功能
2019/09/18 Python
Python通过文本和图片生成词云图
2020/05/21 Python
html5 利用重力感应实现摇一摇换颜色可用来做抽奖等等
2014/05/07 HTML / CSS
中国首家奢侈品O2O网购平台:第五大道奢侈品网
2017/12/14 全球购物
安全生产汇报材料
2014/02/17 职场文书
迎国庆演讲稿
2014/09/15 职场文书
2015年乡镇妇联工作总结
2015/05/19 职场文书
聋哑人盗窃罪辩护词
2015/05/21 职场文书
师德师风心得体会(2016精选篇)
2016/01/12 职场文书
Vue3.0 手写放大镜效果
2021/07/25 Vue.js
各国货币符号大全
2022/02/17 杂记