美图秀秀插件上传用户头像

1.首先要设置crossdomain.xml
下载地址：https://download.csdn.net/download/ly_linyuan/10355995

这个要特别注意，要把这个文件下载下来之后直接放在根目录下面，比如D盘或者某个盘根目录下，通过访问地址：（本机ip/crossdomain.xml）要直到你在浏览器能访问到。我这里是在自己电脑的D盘下，（访问地址：http://localhost:8080/crossdomain.xml）

2.在页面引入js

3.在页面初始化以及进行设置

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个参数是加载编辑器div容器，第2个参数是编辑器类型，第3个参数是div容器宽，第4个参数是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.后台上传图片代码：

/*** 上传头像* @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());//美图秀秀插件已经过滤了上传的文件格式,此处不用判断//保存到服务器上的文件名String trueFileName=String.valueOf(System.currentTimeMillis())+type;/*//保存到服务器上的地址String realPath=path+"/"+trueFileName;//保存到服务器上file.transferTo(new File(realPath));*///对外访问的路径String picUrl=path+"/"+trueFileName;user.setHeadPic(picUrl);//图片上传后保存的目录和名称file.transferTo(new File("D:\\headPic\\" + trueFileName));//保存到数据库中userService.update(user);return "1";  //自定义成功的标志} catch (Exception e) {log.error("上传图片错误：" + e.getMessage());}}return "2"; //自定义失败的标志
}

注意：这里的String path= “http://localhost:8080/headPic“中的headPic是在eclipse中配置的访问图片上传后保存在本地文件的path路径，配置方法详见：https://blog.csdn.net/ly_linyuan/article/details/79981925

7.演示：

美图秀秀插件上传用户头像相关推荐

php接口上传头像 app,php调用美图秀秀插件上传头像
登录美图秀秀WEB开放平台(http://open.web.meitu.com/wiki/), 1.1.设置crossdomain.xml 下载crossdomain.xml文件,把解压出来的cros ...
美图秀秀插件上传若干问题
1.编辑器处理能否上传原图跟处理图? 编辑器只上传处理后的效果图,原图不进行上传.如果你的产品确实有上传原图的需求,说明原图对你们非常重要,这时候你们应该在产品上引导用户先上传原图,再进行美化处理.( ...
php文件用户头像上传代码,网页web上传用户头像代码实现（美图秀秀开放）
网页web上传用户头像代码实现(美图秀秀开放) 在制作论坛或者一些门户社交网站的时候,经常要获取用户的头像.之前我们一般都是自己制作flash插件头像上传.或者用js来自己开发一个头像上传功能.比如有 ...
Springboot + elementUI实现上传用户头像
最近一直在做一个背单词的小项目练手,准备着加入个新功能,想了很多种办法,本来准备利用sm.ms图床,把用户头像上传到图床然后返回链接把链接存到数据库里,后来想了想,感觉用户的头像存在那不太好,于是还是 ...
SpringBoot 使用MultipartFile上传组件实现本地上传用户头像
GIF动图展示 SpringBoot 使用MultipartFile上传组件实现本地上传用户头像GIF效果图本章目录 GIF动图展示主要实现思路 1.使用MultipartFile需要引入的依赖 ...
【探花交友】保存用户信息、上传用户头像、用户信息管理
文章目录 1.3.保存用户信息 1.4.上传用户头像 2.用户信息管理 2.1.查询用户资料 2.2.更新用户资料 1.3.保存用户信息 1.3.1.接口文档 YAPI接口地址:http://192. ...
SSM上传用户头像。解决HTTP 400,保存到本地以及数据库保存路径，在页面显示的问题
第一次用SSM上传用户图片,遇到很多问题,这里逐一记录: 1.保存到本地某个文件夹 2.在页面显示图片 3.报错HTTP 400 bad request 用maven搭建的项目,结构如图: 主要是实体 ...
yii2.0 使用美图秀秀web开放平台进行头像编辑上传
效果图: 给官方文档的链接: http://open.web.meitu.com/wiki/ 这是yii论坛别人推荐用的头像编辑器,新浪也在用这个. 根据文档的内容一步一步做. 设置crossdoma ...
用户上传用户头像至服务器
web框架:spring+hibernate+jQuery HTML代码:  <div class="col-sm-3 userpic&quo ...

美图秀秀插件上传用户头像

美图秀秀插件上传用户头像相关推荐

最新文章

热门文章