input 框上传多个文件以及文件校验

出处 : http://blog.csdn.net/yh_zeng2 http://blog.csdn.net/yh_zeng2/article/details/75209889

1、如何上传多个文件

     在input标签中加入 multiple 属性，如下

[html] view plain copy

print ?

1. <input type=“file” name=“file1” id=“file1” multiple=“multiple”/>   

<input type="file" name="file1" id="file1" multiple="multiple"/> 

       当然，这样也是一样的：

[html] view plain copy

print ?

1. <input type=“file” name=“file1” id=“file1” multiple/>   

<input type="file" name="file1" id="file1" multiple/> 

 

2、如何进行文件校验

      可以通过document.getElementById(“file1”).files;获取选择的文件对象，这是一个数组对象，存放的都是javascript的File对象。通过File对象，可以获取到文件名、文件大小、文件类型等信息。那么什么时候进行校验呢？可以在选择了文件之后，进行校验，这就需要使用onchange事件，当然也可以在表单提交的时候进行校验。

如下：

[html] view plain copy

print ?

1. <input type=“file” name=“file1” id=“file1” multiple=“multiple” onchange=“checkFile(this)”/>  

<input type="file" name="file1" id="file1" multiple="multiple" οnchange="checkFile(this)"/>

文件校验的JS代码如下：

[javascript] view plain copy

print ?

1. function checkFile(el){  
2.          var files = el.files;  //获取选择的文件对象  
3.          var allowTypes = [“image/jpeg”,“image/png”,“image/x-png”,“image/bmp”,“image/gif”]; //允许上传的文件类型  
4.          var maxFileSize = 50 * 1024 * 1024;  //允许上传的单个文件的大小限制，最大能上传50M  
5.          var allowUpload = true; //经过校验之后是否允许上传  
6.          var errorMessage = “”;  //校验文件之后，文件不符合要求的提示信息  
7.            
8.          for(var i=0; i< files.length; i++){  
9.               var fileName = files[i].name;    //文件名  
10.               var fileType = files[i].type;    //文件类型  
11.               var fileSize = files[i].size;    //文件大小，单位为byte（字节）  
12.                 
13.               var typeAccepted = false;  
14.               for(var j = 0; j < allowTypes.length; j++){  
15.                   if(allowTypes[j] == fileType){  
16.                       typeAccepted = true;  
17.                       break;  
18.                   }  
19.               }  
20.               if(typeAccepted != true){  
21.                   errorMessage += fileName + ”不是图片，只能上传图片！”;  
22.                   allowUpload = false;  
23.               }  
24.                 
25.               if(typeAccepted && fileSize > maxFileSize){  
26.                   errorMessage += fileName+”的文件大小超出了50M限制！”;  
27.                   allowUpload = false;  
28.               }  
29.          }  
30.            
31.          if(allowUpload != true){  
32.              el.outerHTML = el.outerHTML; //清空选择的文件  
33.              alert(errorMessage);  
34.          }  
35.      }  

function checkFile(el){
         var files = el.files;  //获取选择的文件对象
         var allowTypes = ["image/jpeg","image/png","image/x-png","image/bmp","image/gif"]; //允许上传的文件类型
         var maxFileSize = 50 * 1024 * 1024;  //允许上传的单个文件的大小限制，最大能上传50M
         var allowUpload = true; //经过校验之后是否允许上传
         var errorMessage = "";  //校验文件之后，文件不符合要求的提示信息

         for(var i=0; i< files.length; i++){
              var fileName = files[i].name;    //文件名
              var fileType = files[i].type;    //文件类型
              var fileSize = files[i].size;    //文件大小，单位为byte（字节）

              var typeAccepted = false;
              for(var j = 0; j < allowTypes.length; j++){
                  if(allowTypes[j] == fileType){
                      typeAccepted = true;
                      break;
                  }
              }
              if(typeAccepted != true){
                  errorMessage += fileName + "不是图片，只能上传图片！";
                  allowUpload = false;
              }

              if(typeAccepted && fileSize > maxFileSize){
                  errorMessage += fileName+"的文件大小超出了50M限制！";
                  allowUpload = false;
              }
         }

         if(allowUpload != true){
             el.outerHTML = el.outerHTML; //清空选择的文件
             alert(errorMessage);
         }
     }

 

            </div>