一、前端代码:
① html 代码:
注意：如需要选择多个文件，进行上传，Ⅰ、multiple=“multiple” 不能省 Ⅱ、选择时是 Ctrl + 你所要选择的文件，不要分多次进行，不然后面选择的文件将会覆盖前面所选的文件
<input type="file" multiple="multiple" id="myFiles" style="width: 100px;height: 25px;"><input type="button" value="上传" id="upload-test" style="width: 100px;height: 25px;background-color: cornsilk;">
② JavaScript 代码:
注: 传方法的话，直接将方法名作为参数传递，然后在内部进行调用就好
// 点击上传按钮，执行上传操作// 注: 参数 uploadSuccess uploadFail 是文件上传成功和失败执行方法的方法名$("#upload-test").on("click",function () {// 方式一var url = '${pageContext.request.contextPath}/XXX/uploadFile.koala';var obj = document.getElementById("myFiles");var len = obj.files.length;for (var i = 0; i < len; i++){// 这个里面可以根据自己的需要对文件进行过滤判断等操作var fileName = obj.files[i].name;uploadFile(url,obj.files[i]); // 执行单个文件的上传(每次都创建一个新的 form,并提交)}//方式二var url2 = '${pageContext.request.contextPath}/XXX/uploadFiles.koala';var files = document.getElementById("myFiles").files;uploadFiles(url2,files,uploadSuccess,uploadFail); // 执行多个文件的上传(本质上是放到一个 form 对象中，同时提交)})// ajax 上传单个文件对象// url 为访问路径// files 为上传文件数组// success 为上传成功后执行方法// fail 为上传文件失败执行的方法function uploadFile(url,file,success,fail){var form = new FormData();form.append("file",file);$.ajax({url:url, //后台urldata: form,cache: false,async: true,type: "POST", dataType: 'json', //数据返回类型，可以是xml、json等processData: false,contentType: false,success: function (data) {//成功，回调传来的success方法success(data);},error: function (er) {//失败，回调函数fail(er);}});}// ajax 上传多个文件对象// url 为访问路径// files 为上传文件数组// success 为上传成功后执行方法// fail 为上传文件失败执行的方法function uploadFiles(url,files,success,fail){var form = new FormData();for (var i = 0; i < files.length; i++){form.append("files",files[i]);}$.ajax({url:url, //后台urldata: form,cache: false,async: true,type: "POST", dataType: 'json', //数据返回类型，可以是xml、json等processData: false,contentType: false,success: function (data) {//成功，回调函数success(data);},error: function (er) {//失败，回调函数fail(data);}});}function uploadSuccess() {alert("上传文件成功")}function uploadFail() {alert("上传文件失败")}
二、后端 Java 代码
/*** 上传的是单个文件*/@ResponseBody@RequestMapping("uploadFile")public void uploadFile(@RequestParam("file") MultipartFile inputFile, HttpServletRequest request){if(inputFile == null){System.out.println("没有想要上传的文件");}else {try {String originalFileName = inputFile.getOriginalFilename(); // 获取原始文件名String savePath = "F:\\temporary";File savePathDir = new File(savePath);System.out.println("文件原始名称:"+originalFileName);System.out.println("原始文件大小: "+inputFile.getSize());if(!savePathDir.exists()){savePathDir.mkdirs();}inputFile.transferTo(new File(savePath,originalFileName));}catch (NullPointerException e){}catch (Exception e){}}}/*** 上传的是多个文件*/@ResponseBody@RequestMapping("uploadFiles")public void uploadFiles(@RequestParam("files") MultipartFile[] inputFiles, HttpServletRequest request){if(inputFiles.length < 1){System.out.println("没有想要上传的文件");}else {try {for (int i = 0; i < inputFiles.length;i++){String originalFileName = inputFiles[i].getOriginalFilename(); // 获取原始文件名long fileSize = inputFiles[i].getSize(); // 文件大小String savePath = "F:\\temporary";// 文件保存地址File savePathDir = new File(savePath);if(!savePathDir.exists()){savePathDir.mkdirs();}inputFiles[i].transferTo(new File(savePath,originalFileName));}}catch (Exception e){e.printStackTrace();}}}
