page part, submit the file with a simple form form, and submit the image or file to the server. An input box for entering the final name of the image, and a file selection for selecting an image.
The page code is as follows:
<form id="form1" > <table style="width:100%;border:0;"> <tr> <th style="width:35;text-align: center;" class="must">图片名称:</th> <td><input id="imgName" style="width:150px;" name="imagePath" verify="true" mustFill="true" maxlength="100" /></td> </tr> <tr id="fileSelect"> <th></th> <td> <input type="file" name="file" id="doc" style="width:150px;" onchange="javascript:setImagePreview(this);"> </td> </table> </form>
js part, send an ajax request, first check whether the name is repeated. There is no repetition to set the action of the form, and then submit the form. code show as below:
//Send a request for a background function that checks whether the name is duplicated, which can be ignored $.ajax({url:"<%=contextPath%>/imageUploadController/imageExistCheck",type:'POST',dataType:'json',data:data ,success:function(msg){ if(msg.result==false&&$("#saveOrUpdata").val()!="1"){ alert("Duplicate name, please change the name"); return 0; }else{//No repetition or modification //The following if is used to verify whether all the required fields in the form are filled in, ignore it. if(Common.verify($("#createForm"))){ //Set the action of the form $('#form1').attr('action', '<%=contextPath%>/imageUploadController/imageUpload'); $("#form1").submit(); } } },error:function(xhr){alert('错误\n'+xhr.result);}}); return false; });
Finally, the background code, the explanations are placed in the comments, which is easier to watch.
@RequestMapping(value="/imageUpload",method=RequestMethod.POST) public String upLoadImage(FireEquipmentInfo fireEquipmentInfo,HttpServletRequest req){ //Convert request MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) req; MultipartFile multipartFile = multipartRequest.getFile("file"); //Get the original file name String fileName = multipartFile.getOriginalFilename(); //Get the original name suffix String fileEnd = fileName.substring(fileName.lastIndexOf(".")+1).toLowerCase(); String realName =null; //Get the project root directory String imagePath=req.getSession().getServletContext().getRealPath("/"); String imageName=null; imageName=RequestUtil.getStringParameter(req, "imagePath"); // Concatenate path and final name imagePath+="img/login/"; realName=imageName+ "." + fileEnd; try { //Instantiate a file File file = new File(imagePath); //create path if(!file.exists()) file.mkdirs(); //Create a file file=new File(imagePath+"/"+realName); file = new File(imagePath,realName); // file storage multipartFile.transferTo(file); } catch (Exception e) { req.setAttribute("msg", e.getMessage()); }