jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <html> <head> <title>Title</title> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> </head> <body> <form action="${pageContext.request.contextPath}/user/uploadPic" method="post" enctype="multipart/form-data" id="tf"> <img id="picture1" style="width:102px;height:126px;" οnclick="selectFile(1);" title="图1"> <input id="image1" name="image" type="file" style="display:none" class="img_upload_file"> <img id="picture2" style="width:102px;height:126px;" οnclick="selectFile(2);" title="图2"> <input id="image2" name="image" type="file" style="display:none" class="img_upload_file"> <img id="picture3" style="width:102px;height:126px;" οnclick="selectFile(3);" title="图3"> <input id="image3" name="image" type="file" style="display:none" class="img_upload_file"> <input type="button" οnclick="test()" value="提交"/> </form> </body> </html> <script> function selectFile(i){ $("#image"+i).trigger("click"); } $("#image1").change(function() { var file = this.files[0]; var reader = new FileReader(); reader.readAsDataURL(file); reader.onload = function(e) { $("#picture1").attr("src", this.result); }; }); $("#image2").change(function() { var file = this.files[0]; var reader = new FileReader(); reader.readAsDataURL(file); reader.onload = function(e) { $("#picture2").attr("src", this.result); }; }); $("#image3").change(function() { var file = this.files[0]; var reader = new FileReader(); reader.readAsDataURL(file); reader.onload = function(e) { $("#picture3").attr("src", this.result); }; }); function test(){ var form = new FormData(document.getElementById("tf")); $.ajax({ url:"${pageContext.request.contextPath}/user/uploadPic", type:"post", data:form, processData:false, contentType:false, success:function(data){ console.log(data); }, error:function(e){ } }); } </script>
@RequestMapping(value="/uploadPic",method = RequestMethod.POST) @ResponseBody public Map selectUser(@RequestParam("image") MultipartFile[] files, HttpServletResponse response, Model model) throws IOException{ String rootPath = System.getProperty("user.dir"); for (MultipartFile file : files) { long l = System.currentTimeMillis(); File dir = new File(rootPath+"/image"); if(!dir.exists()){ dir.mkdirs(); } File f = new File(rootPath+"/image"+"/"+l+file.getOriginalFilename()); //调用SpringMVC的图片保存方法 file.transferTo(f); //自己使用IO流来做数据传输 // byte[] by = new byte[1024]; // InputStream inputStream = file.getInputStream(); // FileOutputStream fileOutputStream = new FileOutputStream(f); // while(inputStream.read(by)!=-1){ // fileOutputStream.write(by); // } // inputStream.close(); // fileOutputStream.close(); } Map<String,Object> ma = new java.util.HashMap<>(); ma.put("state","00"); return ma; }