使用Ajaxfileupload插件分别实现单文件和多文件上传

妖狐艹你老母 2022-06-10 02:06 404阅读 0赞

一．Ajaxfileupload上传文件

首先页面jsp代码：需要引入*jquery和ajaxfileupload.js*

服务端接收文件（本例使用springmvc接收）：

<table> 
 <tbody> 
 <tr> 
 <td> @Controller @RequestMapping("/Upload") publicclass Upload { &nbsp; &nbsp;&nbsp;&nbsp; @RequestMapping(value = "/ToUploadFile", method = { RequestMethod.POST }) &nbsp;&nbsp;&nbsp; public@ResponseBody Integer ToUploadFile(@RequestParam("firstfile") MultipartFile firstfile, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; HttpServletRequest request, HttpServletResponse response) { &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; try { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; request.setCharacterEncoding("utf-8"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; } catch (UnsupportedEncodingException e1) { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; e1.printStackTrace(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; } &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; response.setContentType("text/html;charset=utf-8"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; response.addHeader("Access-Control-Allow-Origin", "*"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; response.addHeader("Access-Control-Allow-Methods", "GET,POST"); &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; // ------------------------------------------------------------------------------------------------------------ &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; String originalFilename = null; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; try { &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if (firstfile.isEmpty()) { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; return 0; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; } else { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; originalFilename = firstfile.getOriginalFilename(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; longsize = firstfile.getSize(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; String contentType = firstfile.getContentType(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; System.out.println("原始文件全路径名: " + originalFilename); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; System.out.println("文件大小:" + size + "KB"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; System.out.println("文件类型:" + contentType); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; System.out.println("========================================"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; } &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; // ------------------------------------------------------------------------------------------------------------ &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; /* &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;* 1. 获取项目的全路径 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;*/ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; String root = request.getServletContext().getRealPath("/WEB-INF/files"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; String filename = firstfile.getOriginalFilename(); &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; /* &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;* 获取文件名，最后一个"\"后面的名字 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;*/ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; intindex = filename.lastIndexOf("\\"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if (index != -1) { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; filename = filename.substring(index + 1); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; } &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; /* &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;* 生成唯一的文件名 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;*/ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; String savename = IdAndTimeCreateUtil.getUUID() + "_" + filename; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; /* &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;* 1. 根据文件名获取hashcode &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;*/ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; inthCode = filename.hashCode(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; // 将hashcode转化为无符号整数基数为16的整数参数的字符串 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; String hex = Integer.toHexString(hCode); &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; /* &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;* 2. 根据字符串生成文件目录 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;*/ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; File dirFile = new File(root, hex.charAt(0) + "/" + hex.charAt(1)); &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; dirFile.mkdirs(); &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; /* &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;* 4. 生成文件 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;*/ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; File destFile = new File(dirFile, savename); &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; String courseFile = destFile.getCanonicalPath(); &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; // 将文件保存到服务器相应的目录位置 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; firstfile.transferTo(destFile); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; /// &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; } catch (Exception e) { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; e.printStackTrace(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; return 0; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; } &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; return 1; &nbsp; &nbsp;&nbsp;&nbsp; } } </td> 
 </tr> 
 </tbody> 
</table>

运行过程如下：

上传文件：

![Center][]

![Center 1][]

控制台的打印：

![Center 2][]

服务器路径下存储的文件：

![Center 3][]

二．上述只能实现单文件的上传，下面顺便实现一下多文件同时上传：

Ajaxfileupload.js插件默认的都是单文件上传，所有要实现多文件上传需要改变源代码：（需要注意的是修改js等静态代码，再次运行的时候要清除服务器的缓存，不然还是用的之前的js导致无法多文件上传）

<table> 
 <tbody> 
 <tr> 
 <td> 原来的代码： createUploadForm: function(id, fileElementId) &nbsp;&nbsp;&nbsp; { //create form &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;var formId = 'jUploadForm' + id; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var fileId = 'jUploadFile' + id; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var form = $('&lt;form&nbsp; action="" method="POST" name="' + formId + '" id="' + formId + '" enctype="multipart/form-data"&gt;&lt;/form&gt;'); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var oldElement = $('#' + fileElementId); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var newElement = $(oldElement).clone(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; $(oldElement).attr('id', fileId); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; $(oldElement).before(newElement); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; $(oldElement).appendTo(form); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //set attributes &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; $(form).css('position', 'absolute'); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; $(form).css('top', '-1200px'); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; $(form).css('left', '-1200px'); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; $(form).appendTo('body'); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; return form; } &nbsp; &nbsp; 修改后： &nbsp; createUploadForm: function(id, fileElementId) &nbsp;&nbsp;&nbsp; { &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; var formId = 'jUploadForm' + id; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var fileId = 'jUploadFile' + id; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var form = $('&lt;form&nbsp; action="" method="POST" name="' + formId + '" id="' + formId + '" enctype="multipart/form-data"&gt;&lt;/form&gt;'); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if(typeof(fileElementId) == 'string'){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; fileElementId = [fileElementId]; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; } &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; for (var i in fileElementId) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var oldElement = $('#' + fileElementId[i]); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var newElement = $(oldElement).clone(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; $(oldElement).attr('id', fileId); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; $(oldElement).before(newElement); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; $(oldElement).appendTo(form); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; } &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //set attributes &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; $(form).css('position', 'absolute'); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; $(form).css('top', '-1200px'); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; $(form).css('left', '-1200px'); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; $(form).appendTo('body'); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; return form; &nbsp;&nbsp;&nbsp; }, </td> 
 </tr> 
 </tbody> 
</table>

下面是前端代码：

<table> 
 <tbody> 
 <tr> 
 <td> &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt; &lt;title&gt;Insert title here&lt;/title&gt; &lt;script type="text/javascript" src="js/jquery-3.2.1.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="js/ajaxfileupload.js"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &nbsp;&nbsp;&nbsp; &lt;input id="firstfile" type="file" name="firstfile"&gt; &nbsp;&nbsp;&nbsp; &lt;button onclick="upload()"&gt;上传&lt;/button&gt; &nbsp; &nbsp;&nbsp;&nbsp; &lt;br /&gt; &nbsp; &nbsp;&nbsp;&nbsp; &lt;input id="file1" type="file" name="files"&gt; &nbsp;&nbsp;&nbsp; &lt;input id="file2" type="file" name="files"&gt; &nbsp;&nbsp;&nbsp; &lt;input id="file3" type="file" name="files"&gt; &nbsp;&nbsp;&nbsp; &lt;button onclick="uploads()"&gt;多上传&lt;/button&gt; &nbsp; &lt;script type="text/javascript"&gt; function upload() { &nbsp;&nbsp;&nbsp; $.ajaxFileUpload &nbsp;&nbsp;&nbsp; ({ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; url: 'http://localhost:8080/AjaxUpload/Upload/ToUploadFile', //用于文件上传的服务器端请求地址 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; type:'post', &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; secureuri: false, //是否需要安全协议，一般设置为false &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; fileElementId: "firstfile", //文件上传域的ID &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; data:{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; "userId": 1 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; },//一同上传的数据 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; dataType: 'json', //返回值类型一般设置为json &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; success: function (data, status)&nbsp; //服务器成功响应处理函数 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if(data&gt;0){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; alert("上传成功"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }else{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; alert("上传失败"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; } &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; } &nbsp; &nbsp;&nbsp;&nbsp; }) } &nbsp;&nbsp;&nbsp; function uploads() { &nbsp;&nbsp;&nbsp; $.ajaxFileUpload &nbsp;&nbsp;&nbsp; ({ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; url: 'http://localhost:8080/AjaxUpload/Upload/ToUploadFiles', //用于文件上传的服务器端请求地址 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; type:'post', &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; secureuri: false, //是否需要安全协议，一般设置为false &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; fileElementId: ['file1','file2','file3'], //文件上传域的ID &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; data:{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; "userId": 1 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; },//一同上传的数据 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; dataType: 'json', //返回值类型一般设置为json &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; success: function (data, status)&nbsp; //服务器成功响应处理函数 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if(data&gt;0){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; alert("上传成功"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }else{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; alert("上传失败"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; } &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; } &nbsp; &nbsp;&nbsp;&nbsp; })&nbsp; } &lt;/script&gt; &lt;/body&gt; &nbsp; </td> 
 </tr> 
 </tbody> 
</table>

服务器端代码如下：

<table> 
 <tbody> 
 <tr> 
 <td> @RequestMapping(value = "/ToUploadFiles", method = { RequestMethod.POST }) &nbsp;&nbsp;&nbsp; public@ResponseBody Integer ToUploadFile2(@RequestParam("files") MultipartFile[] files, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; HttpServletRequest request, HttpServletResponse response) { &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if(files!=null&amp;&amp;files.length&gt;0) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; for(inti=0;i&lt;files.length;i++) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; MultipartFile file=files[i]; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; try { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; request.setCharacterEncoding("utf-8"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; } catch (UnsupportedEncodingException e1) { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; e1.printStackTrace(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; } &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; response.setContentType("text/html;charset=utf-8"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; response.addHeader("Access-Control-Allow-Origin", "*"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; response.addHeader("Access-Control-Allow-Methods", "GET,POST"); &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; // ------------------------------------------------------------------------------------------------------------ &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; String originalFilename = null; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; try { &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if (file.isEmpty()) { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; return 0; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; } else { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; originalFilename = file.getOriginalFilename(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; longsize = file.getSize(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; String contentType = file.getContentType(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; System.out.println("原始文件全路径名: " + originalFilename); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; System.out.println("文件大小:" + size + "KB"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; System.out.println("文件类型:" + contentType); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; System.out.println("========================================"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; } &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; // ------------------------------------------------------------------------------------------------------------ &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; /* &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;* 1. 获取项目的全路径 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;*/ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; String root = request.getServletContext().getRealPath("/WEB-INF/files"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; String filename = file.getOriginalFilename(); &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; /* &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;* 获取文件名，最后一个"\"后面的名字 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;*/ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; intindex = filename.lastIndexOf("\\"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if (index != -1) { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; filename = filename.substring(index + 1); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; } &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; /* &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;* 生成唯一的文件名 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;*/ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; String savename = IdAndTimeCreateUtil.getUUID() + "_" + filename; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; /* &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;* 1. 根据文件名获取hashcode &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;*/ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; inthCode = filename.hashCode(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; // 将hashcode转化为无符号整数基数为16的整数参数的字符串 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; String hex = Integer.toHexString(hCode); &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; /* &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;* 2. 根据字符串生成文件目录 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;*/ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; File dirFile = new File(root, hex.charAt(0) + "/" + hex.charAt(1)); &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; dirFile.mkdirs(); &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; /* &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;* 4. 生成文件 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;*/ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; File destFile = new File(dirFile, savename); &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; String courseFile = destFile.getCanonicalPath(); &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; // 将文件保存到服务器相应的目录位置 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; file.transferTo(destFile); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; /// &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; } catch (Exception e) { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; e.printStackTrace(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; return 0; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; } &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; } &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; } &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; return 1; &nbsp; &nbsp;&nbsp;&nbsp; } </td> 
 </tr> 
 </tbody> 
</table>

运行过程如下：

上传三个文件：

![Center 4][]

![Center 5][]

控制台的打印：

![Center 6][]

服务器路径下的文件：

![Center 7][]

[Center]: /images/20220610/595453dbc47943d0807f8dd1891ff5d0.png
[Center 1]: /images/20220610/9e0cc475b2c3473386339ad917ea98be.png
[Center 2]: /images/20220610/81b365f2e92b446386aa48d98ac20b43.png
[Center 3]: /images/20220610/6137d27cfebd499abb7a6c2df5e3cdbc.png
[Center 4]: /images/20220610/aceeb1b95b724612b5e79f99c94c1048.png
[Center 5]: /images/20220610/cb324946ee0f418db65f036cf7bbaaa0.png
[Center 6]: /images/20220610/9103295564b5481c9b8862ec75ee58b8.png
[Center 7]: /images/20220610/eaa325feaf9d4102bb2e72ce76351672.png