1. 程式人生 > >ssm 框架上傳圖片到伺服器

ssm 框架上傳圖片到伺服器

**

1.html部分

<input id="file" class="kf-img-file" type="file">

2.JS部分

var _csrf = $("meta[name='_csrf']").attr("content"); *//請求令牌(不同專案定義不同,看架構)*
var formData = new FormData();
formData.append('file', $('#file')[0].files[0]);//從div input 中取得
$.ajax({
         url: '../customService/uploadChatPicture.do?_csrf='
+_csrf, type: 'POST', cache: false, async: false, //同步(不是必須) data: formData, processData: false,//上傳必須 contentType: false,//上傳必須 success:function(data){ url = $.parseJSON( data ).src; //回撥解析,圖片路徑 }

3.controller部分

@RequestMapping(value
= "/uploadChatPicture") @ResponseBody public FileUploadResult upload(HttpServletRequest req){ //從請求中獲取 FileUploadResult result = null ; MultipartHttpServletRequest mReq = null; MultipartFile file = null; InputStream is = null ; // 新的檔名 String newFileName = ""
; // 原始檔名 UEDITOR建立頁面元素時的alt和title屬性 String originalFileName = ""; try { mReq = (MultipartHttpServletRequest)req; //formData.append('file', $('#file')[0].files[0]); file = mReq.getFile("file"); //獲取上傳圖片,"file"為append中追加的名字 long size = file.getSize(); if(!file.isEmpty()){ is = file.getInputStream(); //以下為上傳到阿里伺服器 String fileDir = OSSUnit.fileDir(); newFileName=fileDir+OSSUnit.newFileName(file.getOriginalFilename()); OSSUnit.uploadObject(ossClient, is, newFileName, bucketName,size); } else { throw new IOException("檔名為空!"); } String endPontUrl = this.ossClient.getEndpoint().toString(); endPontUrl = endPontUrl.substring(7); String url = "http://"+this.bucketName+"."+endPontUrl+"/"+newFileName; result = new FileUploadResult ("SUCCESS",url,originalFileName,originalFileName); //上傳到阿里伺服器,返回檔案路徑 } catch (Exception e) { System.out.println(e.getMessage()); result = new FileUploadResult ("檔案上傳失敗","","",""); } return result; }