jsp页面
<%@ page language="java" pageEncoding="UTF-8"%> <!DOCTYPE HTML> <html> <head> <script type="text/javascript" src="./js/jquery-3.5.1.min.js"></script> <script type="text/javascript" src="./js/vue.js"></script> <title>文件上传</title> </head> <body> <h1>ajax异步上传文件</h1> <input type="file" id="upload"> <button id="but"onclick="oneUpload()" >上传</button>--> <h1>ajax异步多文件上传</h1> <form id="fileForm"> <input type="file" name="files" multiple="multiple" > <input type="file" name="files" multiple="multiple" > <input type="button" id="btn_add_file" value="上传附件" onclick="upload_files()"> </form> <script type="text/javascript"> //单文件上传 function oneUpload() { var file = document.getElementById("upload").files[0]; var formData = new FormData(); formData.append("file", file); $.ajax({ type: 'POST', url: '${pageContext.request.contextPath}/oneUpload.do', processData: false, //是否把上传的数据 处理为对象 默认为true contentType: false, //避免让jquery 设置请求头有可能会破坏分隔符。 而使服务器不能正常解析文件 data:formData, success: function (data) { alert(data); } }) } //多文件上传 function upload_files(){ var formData = new FormData($("#fileForm")[0]); $.ajax({ type: 'POST', url:'${pageContext.request.contextPath}/allUpload.do', processData: false, //是否把上传的数据 处理为对象 默认为true contentType: false, //避免让jquery 设置请求头有可能会破坏分隔符。 而使服务器不能正常解析文件 data:formData, success: function (data) { alert(data); } }) } </script> </body> </html>
java后端代码
package com.zjn.controller; import java.io.File; import java.io.FileOutputStream; import java.io.IOException; import java.io.InputStream; import java.io.OutputStream; import java.text.SimpleDateFormat; import java.util.Date; import java.util.HashMap; import java.util.List; import java.util.Map; import java.util.UUID; import javax.servlet.http.HttpServletRequest; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestParam; import org.springframework.web.bind.annotation.ResponseBody; import org.springframework.web.multipart.MultipartFile; import org.springframework.web.multipart.MultipartHttpServletRequest; @Controller public class AjaxUpload { /** * 单文件上传 * * @param file * @param request * @return */ @RequestMapping("/oneUpload") @ResponseBody public String oneUploadFile(MultipartFile file, HttpServletRequest request) { String path = "D://图片/img/"; //String data = sft.format(new Date()); String fileName = file.getOriginalFilename(); String lastStr = fileName.substring(fileName.lastIndexOf(".")); if (".txt".equals(lastStr)) { return "文件格式不正确"; } ; File file1 = new File(path); if (!file1.exists()) { file1.mkdirs(); } String newName = UUID.randomUUID().toString().replace("-", "") + fileName; try { file.transferTo(new File(file1, newName)); String url = path + "/" + newName; System.out.println(url); return url; } catch (IOException e) { e.printStackTrace(); } //文件存储路径 return "error"; } /** * 多文件上传 * * @param list * @param request * @return */ @RequestMapping("/allUpload") @ResponseBody public String allUploadFile(@RequestParam(value = "files") List<MultipartFile> list, HttpServletRequest request) { System.out.println("list====="+list); String path = "D://图片/allImg/"; for (MultipartFile file : list) { String fileName = file.getOriginalFilename(); String lastStr = fileName.substring(fileName.lastIndexOf(".")); ; File file1 = new File(path); if (!file1.exists()) { file1.mkdirs(); } String newName = UUID.randomUUID().toString().replace("-", "") + fileName; try { file.transferTo(new File(file1, newName)); String url = path+ "/" + newName; System.out.println(url); } catch (IOException e) { e.printStackTrace(); } } //文件存储路径 return "success"; } }