多个上传文件用js验证文件的格式和大小的方法_多个上传文件用js验证文件的格式和大小的方法

更新时间:2021-07-15    来源:Action    手机版     字体:

【www.bbyears.com--Action】

html部分:

?

12345678<word">dsp:form action="${originatingRequest.requestURI}" method="post" enctype="multipart/form-data"> <word">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部分:

?

12345678910111213141516171819202122232425262728293031323334//将验证的设置和错误信息抽离出来,有利于最后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的时候记得去掉哈)


本文来源:http://www.bbyears.com/flash/129975.html

热门标签

更多>>

本类排行