多個上傳文件如何使用js驗證文件格式和大小

小編給大家分享一下多個上傳文件如何使用js驗證文件格式和大小，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

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"  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;
 } 

 });

注意：這么做的好處是：第一：上傳文件的時候，如果有錯誤，第一時間通知用戶，用戶去修改；

第二：如果用戶最后填完了，雖然之前有提示語句，但是用戶忘了是什么，點擊提交的時候，仍然可以提示用戶問題的原因。同時將錯誤信息和設置值放在最外面，而不用再次驗證，可以節省頁面效率。

以上是“多個上傳文件如何使用js驗證文件格式和大小”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！