多文件上传处理

360weboy

作者：360weboy
博客：http://www.360weboy.com

发现Firefox, Chrome以及Safari三大浏览器已经支持多文件上传，只需要一个添加一个带一个multiple属性的input就可以实现！

HTML结构

1. 
   
2. <!-- 注意:  表单的 enctype属性必须是"multipart/form-data", 这样表单提交的时候，文件数据会被分割成多段-->
   
3. <form method="post" action="upload-page.php" enctype="multipart/form-data">
   
4.   <input name="filesToUpload[]" id="filesToUpload" type="file" multiple="" />
   
5. </form>

复制代码

使用javascript列出选中的文件

1. 
   
2. <ul id="fileList">
   
3.   <li>暂无文件上传</li>
   
4. </ul>

复制代码

1. <script type="text/javascript">
   
2.     function makeFileList() {
   
3.         var input = document.getElementById("filesToUpload");
   
4.         var ul = document.getElementById("fileList");
   
5. 
   
6.         while (ul.hasChildNodes())
   
7.         {
   
8.             ul.removeChild(ul.firstChild);
   
9.         }
   
10. 
    
11.         for (var i = 0; i < input.files.length; i++)
    
12.         {
    
13.             var li = document.createElement("li");
    
14.             li.innerHTML = input.files[i].name;
    
15.             ul.appendChild(li);
    
16.         }
    
17. 
    
18.         if( ! ul.hasChildNodes())
    
19.         {
    
20.             var li = document.createElement("li");
    
21.             li.innerHTML = 'No Files Selected';
    
22.             ul.appendChild(li);
    
23.         }
    
24.     }
    
25. </script>

复制代码

通过input.files属性获取选中的文件，其值是一个数组。所以，我们可以length属性来判断文件数组的长度并且遍历它来得到具体的文件路径以及文件名



服务器端获取的上传数组格式

1. Array
   
2. (
   
3.     [filesToUpload] => Array
   
4.         (
   
5.             [name] => Array
   
6.                 (
   
7.                     [0] => Armenian_1.1stable.zip
   
8.                     [1] => Catalan_1.1stable.zip
   
9.                 )
   
10. 
    
11.             [type] => Array
    
12.                 (
    
13.                     [0] => application/zip
    
14.                     [1] => application/zip
    
15.                 )
    
16. 
    
17.             [tmp_name] => Array
    
18.                 (
    
19.                     [0] => D:\xampp\tmp\phpA5C7.tmp
    
20.                     [1] => D:\xampp\tmp\phpA5C8.tmp
    
21.                 )
    
22. 
    
23.             [error] => Array
    
24.                 (
    
25.                     [0] => 0
    
26.                     [1] => 0
    
27.                 )
    
28. 
    
29.             [size] => Array
    
30.                 (
    
31.                     [0] => 309810
    
32.                     [1] => 289961
    
33.                 )
    
34. 
    
35.         )
    
36. 
    
37. )

复制代码

maochanglu

  <input name="filesToUpload[]" id="filesToUpload" type="file" multiple="" />


多选文件？