ssm 框架上傳圖片到伺服器
阿新 • • 發佈:2019-01-04
**
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;
}