一.Ajaxfileupload上传文件
首先页面jsp代码:需要引入jquery和ajaxfileupload.js
<head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title heretitle> <script type="text/javascript" src="js/jquery-3.2.1.min.js">script> <script type="text/javascript" src="js/ ajaxfileupload.js ">script> head> <body> <input id="firstfile" type="file" name="firstfile"> <button onclick="upload()">上传button>
<br />
<script type="text/javascript"> function upload() { $.ajaxFileUpload ({ url: 'http://localhost:8080/AjaxUpload/Upload/ToUploadFile', //用于文件上传的服务器端请求地址 type:'post', secureuri: false, //是否需要安全协议,一般设置为false fileElementId: "firstfile", //文件上传域的ID data:{ "userId": 1 },//一同上传的数据 dataType: 'json', //返回值类型一般设置为json success: function (data, status) //服务器成功响应处理函数 { if(data>0){ alert("上传成功");
}else{ alert("上传失败");
} }
}) } script> body> |
服务端接收文件(本例使用springmvc接收):
@Controller @RequestMapping("/Upload") publicclass Upload {
@RequestMapping(value = "/ToUploadFile", method = { RequestMethod.POST }) public@ResponseBody Integer ToUploadFile(@RequestParam("firstfile") MultipartFile firstfile, HttpServletRequest request, HttpServletResponse response) {
try { request.setCharacterEncoding("utf-8"); } catch (UnsupportedEncodingException e1) { e1.printStackTrace(); } response.setContentType("text/html;charset=utf-8"); response.addHeader("Access-Control-Allow-Origin", "*"); response.addHeader("Access-Control-Allow-Methods", "GET,POST");
// ------------------------------------------------------------------------------------------------------------
String originalFilename = null; try {
if (firstfile.isEmpty()) { return 0; } else { originalFilename = firstfile.getOriginalFilename(); longsize = firstfile.getSize(); String contentType = firstfile.getContentType(); System.out.println("原始文件全路径名: " + originalFilename); System.out.println("文件大小:" + size + "KB"); System.out.println("文件类型:" + contentType); System.out.println("========================================"); }
// ------------------------------------------------------------------------------------------------------------
/* * 1. 获取项目的全路径 */ String root = request.getServletContext().getRealPath("/WEB-INF/files"); String filename = firstfile.getOriginalFilename();
/* * 获取文件名,最后一个"\"后面的名字 */ intindex = filename.lastIndexOf("\\"); if (index != -1) { filename = filename.substring(index + 1); }
/* * 生成唯一的文件名 */ String savename = IdAndTimeCreateUtil.getUUID() + "_" + filename;
/* * 1. 根据文件名获取hashcode */ inthCode = filename.hashCode(); // 将hashcode转化为无符号整数基数为16的整数参数的字符串 String hex = Integer.toHexString(hCode);
/* * 2. 根据字符串生成文件目录 */ File dirFile = new File(root, hex.charAt(0) + "/" + hex.charAt(1));
dirFile.mkdirs();
/* * 4. 生成文件 */ File destFile = new File(dirFile, savename);
String courseFile = destFile.getCanonicalPath();
// 将文件保存到服务器相应的目录位置 firstfile.transferTo(destFile); /// } catch (Exception e) { e.printStackTrace(); return 0; }
return 1;
} } |
运行过程如下:
上传文件:
控制台的打印:
服务器路径下存储的文件:
二.上述只能实现单文件的上传,下面顺便实现一下多文件同时上传:
Ajaxfileupload.js插件默认的都是单文件上传,所有要实现多文件上传需要改变源代码:(需要注意的是修改js等静态代码,再次运行的时候要清除服务器的缓存,不然还是用的之前的js导致无法多文件上传)
原来的代码: createUploadForm: function(id, fileElementId) { //create form var formId = 'jUploadForm' + id; var fileId = 'jUploadFile' + id; var form = $(' ');var oldElement = $('#' + fileElementId); var newElement = $(oldElement).clone(); $(oldElement).attr('id', fileId); $(oldElement).before(newElement); $(oldElement).appendTo(form); //set attributes $(form).css('position', 'absolute'); $(form).css('top', '-1200px'); $(form).css('left', '-1200px'); $(form).appendTo('body'); return form; }
修改后:
createUploadForm: function(id, fileElementId) {
var formId = 'jUploadForm' + id; var fileId = 'jUploadFile' + id; var form = $(' ');
if(typeof(fileElementId) == 'string'){ fileElementId = [fileElementId]; } for (var i in fileElementId) { var oldElement = $('#' + fileElementId[i]); var newElement = $(oldElement).clone(); $(oldElement).attr('id', fileId); $(oldElement).before(newElement); $(oldElement).appendTo(form); } //set attributes $(form).css('position', 'absolute'); $(form).css('top', '-1200px'); $(form).css('left', '-1200px'); $(form).appendTo('body'); return form; }, |
下面是前端代码:
<head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title heretitle> <script type="text/javascript" src="js/jquery-3.2.1.min.js">script> <script type="text/javascript" src="js/ajaxfileupload.js">script> head> <body> <input id="firstfile" type="file" name="firstfile"> <button onclick="upload()">上传button>
<br />
<input id="file1" type="file" name="files"> <input id="file2" type="file" name="files"> <input id="file3" type="file" name="files"> <button onclick="uploads()">多上传button>
<script type="text/javascript"> function upload() { $.ajaxFileUpload ({ url: 'http://localhost:8080/AjaxUpload/Upload/ToUploadFile', //用于文件上传的服务器端请求地址 type:'post', secureuri: false, //是否需要安全协议,一般设置为false fileElementId: "firstfile", //文件上传域的ID data:{ "userId": 1 },//一同上传的数据 dataType: 'json', //返回值类型一般设置为json success: function (data, status) //服务器成功响应处理函数 { if(data>0){ alert("上传成功");
}else{ alert("上传失败");
} }
}) } function uploads() { $.ajaxFileUpload ({ url: 'http://localhost:8080/AjaxUpload/Upload/ToUploadFiles', //用于文件上传的服务器端请求地址 type:'post', secureuri: false, //是否需要安全协议,一般设置为false fileElementId: ['file1','file2','file3'], //文件上传域的ID data:{ "userId": 1 },//一同上传的数据 dataType: 'json', //返回值类型一般设置为json success: function (data, status) //服务器成功响应处理函数 { if(data>0){ alert("上传成功");
}else{ alert("上传失败");
} }
}) } script> body>
|
服务器端代码如下:
@RequestMapping(value = "/ToUploadFiles", method = { RequestMethod.POST }) public@ResponseBody Integer ToUploadFile2(@RequestParam("files") MultipartFile[] files, HttpServletRequest request, HttpServletResponse response) {
if(files!=null&&files.length>0) { for(inti=0;i<files.length;i++) {
MultipartFile file=files[i]; try { request.setCharacterEncoding("utf-8"); } catch (UnsupportedEncodingException e1) { e1.printStackTrace(); } response.setContentType("text/html;charset=utf-8"); response.addHeader("Access-Control-Allow-Origin", "*"); response.addHeader("Access-Control-Allow-Methods", "GET,POST");
// ------------------------------------------------------------------------------------------------------------
String originalFilename = null; try {
if (file.isEmpty()) { return 0; } else { originalFilename = file.getOriginalFilename(); longsize = file.getSize(); String contentType = file.getContentType(); System.out.println("原始文件全路径名: " + originalFilename); System.out.println("文件大小:" + size + "KB"); System.out.println("文件类型:" + contentType); System.out.println("========================================"); }
// ------------------------------------------------------------------------------------------------------------
/* * 1. 获取项目的全路径 */ String root = request.getServletContext().getRealPath("/WEB-INF/files"); String filename = file.getOriginalFilename();
/* * 获取文件名,最后一个"\"后面的名字 */ intindex = filename.lastIndexOf("\\"); if (index != -1) { filename = filename.substring(index + 1); }
/* * 生成唯一的文件名 */ String savename = IdAndTimeCreateUtil.getUUID() + "_" + filename;
/* * 1. 根据文件名获取hashcode */ inthCode = filename.hashCode(); // 将hashcode转化为无符号整数基数为16的整数参数的字符串 String hex = Integer.toHexString(hCode);
/* * 2. 根据字符串生成文件目录 */ File dirFile = new File(root, hex.charAt(0) + "/" + hex.charAt(1));
dirFile.mkdirs();
/* * 4. 生成文件 */ File destFile = new File(dirFile, savename);
String courseFile = destFile.getCanonicalPath();
// 将文件保存到服务器相应的目录位置 file.transferTo(destFile); /// } catch (Exception e) { e.printStackTrace(); return 0; } }
}
return 1;
} |
运行过程如下:
上传三个文件:
控制台的打印:
服务器路径下的文件: