欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

多个上传文件用js验证文件的格式和大小的方法(推荐)

程序员文章站 2023-12-13 18:29:28
html部分:

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验证文件的格式和大小的方法(推荐)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

上一篇:

下一篇: