美图秀秀插件上传用户头像
生活随笔
收集整理的這篇文章主要介紹了
美图秀秀插件上传用户头像
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
1.首先要設(shè)置crossdomain.xml
下載地址：https://download.csdn.net/download/ly_linyuan/10355995
這個(gè)要特別注意，要把這個(gè)文件下載下來之后直接放在根目錄下面，比如D盤或者某個(gè)盤根目錄下， 通過訪問地址：（本機(jī)ip/crossdomain.xml）要直到你在瀏覽器能訪問到。我這里是在自己電腦的D盤下，（訪問地址：http://localhost:8080/crossdomain.xml）
2.在頁面引入js
3.在頁面初始化以及進(jìn)行設(shè)置
4.完整頁面代碼
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>美圖秀秀上傳頭像</title> <script src="${path}/js/jquery1.42.min.js" type="text/javascript"></script> <!-- 美圖秀秀 --> <script src="http://open.web.meitu.com/sources/xiuxiu.js" type="text/javascript"></script> </head> <script type="text/javascript"> var url = "http://localhost:8080/personal/user/uploadPic"; $(function(){/*第1個(gè)參數(shù)是加載編輯器div容器，第2個(gè)參數(shù)是編輯器類型，第3個(gè)參數(shù)是div容器寬，第4個(gè)參數(shù)是div容器高*/xiuxiu.embedSWF("altContent",5,850,500);//修改為自己的圖片上傳接口xiuxiu.setUploadURL(url);xiuxiu.setUploadType(2);xiuxiu.setUploadDataFieldName("file");xiuxiu.onUploadResponse = function (data){if(data=="1"){alert("保存成功!");}else{alert("保存失敗,請重試")}location.reload();}; })</script> <body> <div class="tophide" style="display:block;" id="div1"><center><h3>頭像上傳</h3><div class="headbox" id="altContent"></div></center> </div> </body> </html>5.效果圖：
6.后臺(tái)上傳圖片代碼：
/*** 上傳頭像* @return*/ @RequestMapping("/uploadPic") @ResponseBody public String saveFile(MultipartFile file,HttpSession session) {//判斷文件是否為空if(file !=null){Integer uid = (Integer) session.getAttribute(Constant.SESSION_ACCOUNTID);User user = userService.getUserById(uid);//獲取文件名String fileName=file.getOriginalFilename();//apache圖片資源訪問的路徑（這里是我自己在配置文件中配置的）自己可以用下面的路徑/*String path = DeployProperties.getInstance().getProperty("PATH");String url = DeployProperties.getInstance().getProperty("APACHE_URL");*///apache圖片資源訪問的路徑，可以直接寫,headPic是我上傳頭像的保存目錄String path= "http://localhost:8080/headPic";//文件名后綴try {String type = fileName.substring(fileName.lastIndexOf("."), fileName.length());//美圖秀秀插件已經(jīng)過濾了上傳的文件格式,此處不用判斷//保存到服務(wù)器上的文件名String trueFileName=String.valueOf(System.currentTimeMillis())+type;/*//保存到服務(wù)器上的地址String realPath=path+"/"+trueFileName;//保存到服務(wù)器上file.transferTo(new File(realPath));*///對外訪問的路徑String picUrl=path+"/"+trueFileName;user.setHeadPic(picUrl);//圖片上傳后保存的目錄和名稱file.transferTo(new File("D:\\headPic\\" + trueFileName));//保存到數(shù)據(jù)庫中userService.update(user);return "1"; //自定義成功的標(biāo)志} catch (Exception e) {log.error("上傳圖片錯(cuò)誤：" + e.getMessage());}}return "2"; //自定義失敗的標(biāo)志 }注意：這里的String path= “http://localhost:8080/headPic“中的headPic是在eclipse中配置的訪問圖片上傳后保存在本地文件的path路徑，配置方法詳見：https://blog.csdn.net/ly_linyuan/article/details/79981925
7.演示：
總結(jié)
以上是生活随笔為你收集整理的美图秀秀插件上传用户头像的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： VNC远程登录linux服务器，桌面图标
- 下一篇： 服务器开关电源型号ab和sb,北京DEL