前端代码:
<form id="form_upload"><input id="upload_img_id" type="file" name="fileName"/><button ng-click="uploadFile()" type="button">上传</button></form>
angularjs代码
this.uploadFile = function(){//重点1:form_upload是form表单的idvar formData = new FormData(document.getElementById("form_upload"));//重点2:upload_img_id是文件input的idvar file = document.getElementById("upload_img_id").files[0];//重点3:向formData中添加数据:formData.append("file",file);//下面是angularjs的代码,可以换成其他前端代码实现,重点是formData上传return $http({method:'post',url:'/seller/fileload/uploadFile.do',data:formData,headers:{'Content-Type':undefined} ,// Content-Type : text/html text/plaintransformRequest:angular.identity//浏览器会帮我们把Content-Type 设置为 multipart/form-data.});}
端java代码(SpringBoot的),SpringBoot自带文件上传,可以直接用
//重点4:@RequestParam("fileName")这个跟前端的input标签的name一致@RequestMapping(value = "uploadFile.do", method = RequestMethod.POST)@ResponseBodypublic String fileUpload(@RequestParam("fileName") MultipartFile file){System.out.println(file.getOriginalFilename()+">>>>>>>>>");if(file.isEmpty()){return "false";}String fileName = file.getOriginalFilename();//z.pngint size = (int) file.getSize();//fileName=fileName.substring(fileName.lastIndexOf("\\")+1);String path = System.getProperty("user.dir");// /Users/apple/Desktop/IDEAWORKSPACE/day2/shoppingmall2File dest = new File(path+"/target/classes/static/img" + "/" + fileName);if(!dest.getParentFile().exists()){ //判断文件父目录是否存在dest.getParentFile().mkdir();}try {file.transferTo(dest); //保存文件return "{\"img_path\":\"http://localhost:8080/img/"+fileName+"\"}";} catch (IllegalStateException e) {e.printStackTrace();return "false";} catch (IOException e) {e.printStackTrace();return "false";}}