使用html+ajax+formdata+SpringMVC实现单个文件，和多个文件上传功能

1. <pre name="code" class="html">html代码</pre><input type="file" multiple="true" id="file" name="file"/><button class="u-button u-button-primary" onclick="uploadFileMethod1()" id="doUpload">确认附件</button>  
2. <pre></pre>  
3. <br>  
4. <p>js代码</p>  
5. <p>单个文件上传<br>  
6. </p>  
7. <p></p><pre name="code" class="plain"> function uploadFileMethodSingleFile()  
8.   {  
9.        
10.       var FileController = $ctx+"/fankuiController/saveFiles";                    // 接收上传文件的后台地址  
11.       // FormData 对象  
12.       var fileName = document.getElementById("file").value;  
13.      // alert(getPath(fileObj));  
14.       var form = new FormData();  
15.   
16.       var fileObj = document.getElementById("file").files[0]; // 获取文件对象  
17.        form.append("file ",fileObj );   // 文件对象    
18.    
19.       var xhr = new XMLHttpRequest();  
20.       xhr.open("post", FileController, true);  
21.       xhr.send(form);  
22.       xhr.onload = function () {  
23.           alert("上传完成!");  
24.       };  
25.   }</pre><br>  
26. 单个文件上传时，controller用MultipartFile 类型的参数接受文件<pre name="code" class="java">@RequestMapping(method = RequestMethod.POST,value = "saveFiles")  
27.     public @ResponseBody Map<String,Object> saveFiles(@RequestParam(value = "file") MultipartFile file, HttpServletRequest request) {  
28.         Map<String,Object> reg=new HashMap<String,Object>();    
29.         //将内存中的数据写入磁盘  
30.         System.out.println("开始进行附件上传");  
31.           
32.         try {  
33.                 //String filePath = request.getSession().getServletContext().getRealPath("/");  
34.                 String filePath ="c:\\";  
35.                 MultipartFile file = fileArray[i];  
36.                 String originalFileName = file.getOriginalFilename();  
37.                 String newFileName = UUID.randomUUID()+originalFileName;  
38.                 String finalPath = filePath+newFileName;  
39.                 System.out.println(originalFileName);  
40.                 System.out.println(newFileName);  
41.                 System.out.println(finalPath);  
42.                 System.out.println("参数"+request.getParameter("json_filesNameArray"));  
43.                 System.out.println("file"+file.getContentType());  
44.                   
45.                 File fileAttach = new File(finalPath);  
46.                 file.transferTo(fileAttach);  
47.               
48.         } catch (Exception e1) {  
49.             e1.printStackTrace();  
50.         }  
51.         //上传成功后，将附件加入数据库附件表的blob字段中  
52.           
53.           
54.                 
55.           reg.put("result","success");  
56.           return reg;  
57.     }</pre><br>  
58. <p></p>  
59. <p>如果是多个文件上传 fomdata 中要使用formdata.append() 对多个文件进行遍历 然后进行上传</p>  
60. <p></p><pre name="code" class="javascript">function uploadFileMethod1()  
61.   {  
62.        
63.       var FileController = $ctx+"/fankuiController/saveFiles";                    // 接收上传文件的后台地址  
64.       // FormData 对象  
65.       var fileName = document.getElementById("file").value;  
66.      // alert(getPath(fileObj));  
67.       var form = new FormData();  
68.       form.append("json_filesNameArray", fileName);                        // 可以增加表单数据  
69. //      var fileArray = new Array();  
70. //      for(var i=0;i<fileArray.length;i++)  
71. //    {  
72. //        var fileObj = document.getElementById("file").files[i]; // 获取文件对象  
73. //        fileArray.push(fileObj);  
74. //    }  
75.       var files = document.getElementById("file").files;  
76.       for(var i=0; i< files.length; i++){  
77.           alert(files[i].name);  
78.           form.append("fileArray",files[i]);   // 文件对象    
79.           }   
80.       // XMLHttpRequest 对象  
81.       //var fileObj = document.getElementById("file").files[0];  
82.       //form.append("fileArray", fileObj);  
83.       var xhr = new XMLHttpRequest();  
84.       xhr.open("post", FileController, true);  
85.       xhr.send(form);  
86.       xhr.onload = function () {  
87.           alert("上传完成!");  
88.       };  
89.   }</pre>多文件上传时，controller端，进行接收时 使用 MultipartFile[] 类型参数 接受 数组类型的多个文件,然后遍历数组进行操作<p></p>  
90. <p></p><pre name="code" class="java">@RequestMapping(method = RequestMethod.POST,value = "saveFiles")  
91.     public @ResponseBody Map<String,Object> saveFiles(@RequestParam(value = "fileArray") MultipartFile[] fileArray, HttpServletRequest request) {  
92.         Map<String,Object> reg=new HashMap<String,Object>();    
93.         //将内存中的数据写入磁盘  
94.         System.out.println("开始进行附件上传");  
95.         System.out.println(fileArray.length);  
96.         try {  
97.             for(int i=0;i<fileArray.length;i++)  
98.             {  
99.                 //String filePath = request.getSession().getServletContext().getRealPath("/");  
100.                 String filePath ="c:\\";  
101.                 MultipartFile file = fileArray[i];  
102.                 String originalFileName = file.getOriginalFilename();  
103.                 String newFileName = UUID.randomUUID()+originalFileName;  
104.                 String finalPath = filePath+newFileName;  
105.                 System.out.println(originalFileName);  
106.                 System.out.println(newFileName);  
107.                 System.out.println(finalPath);  
108.                 System.out.println("参数"+request.getParameter("json_filesNameArray"));  
109.                 System.out.println("file"+file.getContentType());  
110.                   
111.                 File fileAttach = new File(finalPath);  
112.                 file.transferTo(fileAttach);  
113.             }  
114.               
115.         } catch (Exception e1) {  
116.             e1.printStackTrace();  
117.         }</pre><br>  
118. <br>  
119. <p></p>  
120. <p><br>  
121. </p>  
122. <link rel="stylesheet" href="http://static.blog.csdn.net/public/res-min/markdown_views.css?v=2.0">