1. Introduce script files in the jsp page <head> tag (note the order)
<script type="text/javascript" src="resources/js/jquery-3.3.1.min.js"></script> <script type="text/javascript" src="resources/js/ajaxFileUpload.js"></script>
2.SpringMVC.xml configuration file (must be configured)
<!--Upload the image using springMVC ajaxFileUpload--> <bean id="multipartResolver"> <property name="maxUploadSize" value="10485760" /> </bean>
3. <input> tag (id attribute, fileElementId of ajaxFileUpload in <script> will be used)
<input type="file" id="headImg" name="headImg"/>
4. In the <script> tag, I write ajaxFileUpload in a function, and call the function at the location where the upload image is needed.
function headImgUpload(){ //The image upload function var results = ""; var account = $("#account").val(); //The two variables of account and identity will be used later according to my needs. Readers can delete or modify these two variables according to their own needs var identity = $("input[name='identity']:checked").val(); $.ajaxFileUpload({ url:"register/headImgUpload?account="+account+"&identity="+identity,//The method in the controller layer is accessed according to the url secureuri:false, fileElementId:"headImg", // The id attribute type in the <input> tag:"POST", dataType:"text", // The data type returned by the server is successful:function (result) { result = result.replace(/<pre.*?>/g, ''); //ajaxFileUpload will add <pre style="...".">text</pre> to the text content responded to by the server. result = result.replace(/<PRE.*?>/g, ''); result = result.replace("<PRE>", ''); result = result.replace("</PRE>", ''); result = result.replace("<pre>", ''); result = result.replace("</pre>", ''); result = JSON.parse(result);//Convert to json format results = result.result; alert(result); }, error:function (data,status,error) { alert("Failed!!!"+error); } });}5. Controller layer
@Controller@RequestMapping(value = "register")public class RegisterController { //User avatar upload @RequestMapping(value = "/headImgUpload",method = RequestMethod.POST) @ResponseBody public Map<String,Object> headImgUpload(@RequestParam MultipartFile headImg, String account, String identity, HttpServletRequest request){ //Upload result String result = "fail"; //The location where the avatar is uploaded String imgRealPath = ""; try{ //Make sure the uploaded image is not empty if(headImg != null && !headImg.isEmpty()){ //Judge the identity of the registered user, the merchant or the member if(identity.equals("member")){ //Member imgRealPath = request.getSession().getServletContext().getRealPath("/resources/image/member"); }else if(identity.equals("businessman")){ //Merchant imgRealPath = request.getSession().getServletContext().getRealPath("/resources/image/member"); }else if(identity.equals("businessman")){ //Merry imgRealPath = request.getSession().getServletContext().getRealPath("/resources/image/businessman"); } System.out.println(imgRealPath);//Print the path in the console//The file name saved after upload is completed String fileName= account + ".jpg"; //If the folder does not exist, create a new File fileFolder = new File(imgRealPath); if(!fileFolder.exists()){ fileFolder.mkdirs(); } File file = new File(fileFolder,fileName); //transferTo(), springMVC method is used to write the image in memory to disk when uploading pictures;//IO exception will be reported result = "success"; } }catch (IOException e){ e.printStackTrace(); } Map<String,Object> resultMap = new HashMap<String,Object>(); resultMap.put("result",result); return resultMap; }}Summarize
The above is what the editor introduced to you. SpringMVC uses ajaxFailUpload to upload pictures. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to everyone in time. Thank you very much for your support to Wulin.com website!