<input type="hidden" name="imgSrcs" id="imgSrcs">
<div class="weui-cell">
<div class="weui-uploader__bd">
<div class="weui-uploader__hd">
<p class="weui-uploader__title">图片上传</p>
</div>
<ul class="weui-uploader__files" id="uploaderFiles">
<li class="weui-uploader__file" style="background-image:url(${base}/resources/shop/images/add.jpg)"id="add-img"></li>
<img src="" class="weui-uploader__file deleteFile" id="add-img1" hidden>
<img src="" class="weui-uploader__file deleteFile" id="add-img2" hidden>
<img src="" class="weui-uploader__file deleteFile" id="add-img3" hidden>
<img src="" class="weui-uploader__file deleteFile" id="add-img4" hidden>
<img src="" class="weui-uploader__file deleteFile" id="add-img5" hidden>
</li>
</ul>
</div>
</div>
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script type="text/javascript" src="${base}/resources/shop/js/jquery-weui.js"></script>
<script>
function getPath(){
return '${base}';
}
$(document).ready(function(){
//调用微信接口功能
$.ajax({
url: '${base}/wx/share.jhtml',
type: "POST",
data: {url : window.location.href},
dataType: "json",
cache: false,
success: function(data) {
//alert(data.member.nickName);
wx.config({
beta: true,// 必须这么写，否则在微信插件有些jsapi会有问题
debug:false,
// 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: data.wxAppId,
// 必填，公众号的唯一标识
timestamp: data.timestamp,
// 必填，生成签名的时间戳
nonceStr: data.nonce_str,
// 必填，生成签名的随机串
signature: data.signature,
// 必填，签名，见附录1
jsApiList: ["uploadImage","chooseImage"] // 必填，需要使用的JS接口列表，
});
wx.error(function(res){
});
wx.ready(function(){
// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
});
}
});
});
var j = 1;
var imageIds = "";
var imgSrcs = "";
//添加图片
$("#add-img").click(function(){
var $this = $(this);
wx.chooseImage({
count: 5, // 默认9
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
success: function (res) {
var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
for(var i=0;i<localIds.length;i++){
var localId = localIds[i];
//alert(localId);
var imgId = "#add-img"+j;
j = j+1;
//alert(imgId);
$(imgId).attr("src",localId);
$(imgId).show();
wx.uploadImage({
localId: localId, // 需要上传的图片的本地ID，由chooseImage接口获得
isShowProgressTips: 1, // 默认为1，显示进度提示
success: function (res) {
var serverId = res.serverId; // 返回图片的服务器端ID
$.ajax({
url:"${base}/onlineService/uploadImg.jhtml",
cache : false,
type:"GET",
data: {
'serverId' : serverId,
'uploadStatus' : 'repair'
},
error: function(request) {$.alert("网络连接异常");},
success: function(data) {
var imgSrc = data.imgSrc;
imgSrcs = imgSrcs + imgSrc + ",";
$("#imgSrcs").val(imgSrcs);
//alert($("#imgSrcs").val());
}
});
}
});
}
}
});
});
//移除图片
$(".deleteFile").click(function(){
var $this = $(this);
var id = "#"+$this.attr("id");
$.confirm("确认移除图片吗？", function() {
$this.attr("src","");
$(id).hide();
}, function() {
});
});
</script>
//后台
/**
* 上传路径
*/
private final static String UPLOAD_REPAIR_IMG_URL = "upload/image/repair/";
/**
* 上传路径
*/
private final static String UPLOAD_MESSAGE_IMG_URL = "upload/image/message/";
/**
* 上传路径
*/
private final static String UPLOAD_APPRAISE_IMG_URL = "upload/image/appraise/";
/**
* 上传图片
* @author wxs
* @version 1.0
* @time 2017年10月17日 下午1:01:06
*/
@RequestMapping(value = "/uploadImg", method = {RequestMethod.GET,RequestMethod.POST})
public @ResponseBody
Map<String,Object> uploadImg(String uploadStatus,HttpServletRequest request,RedirectAttributes redirectAttributes,String serverId) {
Map<String,Object> data = new HashMap<>();
//TODO
// String openId = (String) request.getSession().getAttribute("openId");
String openId = "wxs-hsd";
WxUser wxUser = wxUserService.findByOpId(openId);
//获取token
// Admin admin = adminService.getCurrent();
// Crop co=cropService.findByAdmin(admin.getId());
Crop co=cropService.findByAdmin(9l);
StringBuffer str = new StringBuffer();
str.append("https://qyapi.weixin.qq.com/cgi-bin/gettoken?corpid=");
str.append(co.getCropId());
str.append("&corpsecret=");
co.setSecret(co.getSecret());
str.append(co.getSecret());
String token=null;
try{
JSONObject jsontoken = JsonUtils.toJSONObject(HttpUtil.getInvoke(str.toString()));
int errcode=jsontoken.getInt("errcode");
if(errcode!=0){
addFlashMessage(redirectAttributes, Message.error("cropid或secret不正确"));
return data;
}
token = jsontoken.getString("access_token");
}catch(JSONException e){
addFlashMessage(redirectAttributes, Message.error("cropid或secret不正确"));
return data;
}
//获取临时素材
JSONObject json1=new JSONObject();
json1.put("media_id", serverId);
String getImg = "https://qyapi.weixin.qq.com/cgi-bin/media/get?access_token=" + token + "&media_id=" + serverId;
//JSONObject getImgJson = JsonUtils.toJSONObject(HttpUtil.getInvoke(getImg));
String imgSrc = "";
try{
URL u = new URL(getImg);
HttpURLConnection conn = (HttpURLConnection) u.openConnection();
conn.setRequestMethod("GET");
conn.connect();
BufferedInputStream bis = new BufferedInputStream(conn.getInputStream());
// 生成不同文件名称
String path = request.getSession().getServletContext().getRealPath("/");
String baseUploadPath = "";
String newFileName = UUID.randomUUID().toString() + ".jpg";
if("repair".equals(uploadStatus)){
baseUploadPath = path + UPLOAD_REPAIR_IMG_URL;
imgSrc = "/" + UPLOAD_REPAIR_IMG_URL + newFileName;
}
if("appraise".equals(uploadStatus)){
baseUploadPath = path + UPLOAD_APPRAISE_IMG_URL;
imgSrc = "/" + UPLOAD_APPRAISE_IMG_URL + newFileName;
}
if("message".equals(uploadStatus)){
baseUploadPath = path + UPLOAD_MESSAGE_IMG_URL;
imgSrc = "/" + UPLOAD_MESSAGE_IMG_URL + newFileName;
}
// String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"/";
data.put("imgSrc", imgSrc);
BufferedOutputStream bos = new BufferedOutputStream(new FileOutputStream(baseUploadPath + newFileName));
byte[] buf = new byte[1024];
int length = bis.read(buf);
while (length != -1) {
bos.write(buf, 0, length);
length = bis.read(buf);
}
bos.close();
bis.close();
} catch (MalformedURLException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
}
return data;
}
<input type="hidden" name="imgSrcs" id="imgSrcs">
<div class="weui-cell">
<div class="weui-uploader__bd">
<div class="weui-uploader__hd">
<p class="weui-uploader__title">图片上传</p>
</div>
<ul class="weui-uploader__files" id="uploaderFiles">
<li class="weui-uploader__file" style="background-image:url(${base}/resources/shop/images/add.jpg)"id="add-img"></li>
<img src="" class="weui-uploader__file deleteFile" id="add-img1" hidden>
<img src="" class="weui-uploader__file deleteFile" id="add-img2" hidden>
<img src="" class="weui-uploader__file deleteFile" id="add-img3" hidden>
<img src="" class="weui-uploader__file deleteFile" id="add-img4" hidden>
<img src="" class="weui-uploader__file deleteFile" id="add-img5" hidden>
</li>
</ul>
</div>
</div>
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script type="text/javascript" src="${base}/resources/shop/js/jquery-weui.js"></script>
<script>
function getPath(){
return '${base}';
}
$(document).ready(function(){
//调用微信接口功能
$.ajax({
url: '${base}/wx/share.jhtml',
type: "POST",
data: {url : window.location.href},
dataType: "json",
cache: false,
success: function(data) {
//alert(data.member.nickName);
wx.config({
beta: true,// 必须这么写，否则在微信插件有些jsapi会有问题
debug:false,
// 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: data.wxAppId,
// 必填，公众号的唯一标识
timestamp: data.timestamp,
// 必填，生成签名的时间戳
nonceStr: data.nonce_str,
// 必填，生成签名的随机串
signature: data.signature,
// 必填，签名，见附录1
jsApiList: ["uploadImage","chooseImage"] // 必填，需要使用的JS接口列表，
});
wx.error(function(res){
});
wx.ready(function(){
// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
});
}
});
});
var j = 1;
var imageIds = "";
var imgSrcs = "";
//添加图片
$("#add-img").click(function(){
var $this = $(this);
wx.chooseImage({
count: 5, // 默认9
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
success: function (res) {
var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
for(var i=0;i<localIds.length;i++){
var localId = localIds[i];
//alert(localId);
var imgId = "#add-img"+j;
j = j+1;
//alert(imgId);
$(imgId).attr("src",localId);
$(imgId).show();
wx.uploadImage({
localId: localId, // 需要上传的图片的本地ID，由chooseImage接口获得
isShowProgressTips: 1, // 默认为1，显示进度提示
success: function (res) {
var serverId = res.serverId; // 返回图片的服务器端ID
$.ajax({
url:"${base}/onlineService/uploadImg.jhtml",
cache : false,
type:"GET",
data: {
'serverId' : serverId,
'uploadStatus' : 'repair'
},
error: function(request) {$.alert("网络连接异常");},
success: function(data) {
var imgSrc = data.imgSrc;
imgSrcs = imgSrcs + imgSrc + ",";
$("#imgSrcs").val(imgSrcs);
//alert($("#imgSrcs").val());
}
});
}
});
}
}
});
});
//移除图片
$(".deleteFile").click(function(){
var $this = $(this);
var id = "#"+$this.attr("id");
$.confirm("确认移除图片吗？", function() {
$this.attr("src","");
$(id).hide();
}, function() {
});
});
</script>
//后台
/**
* 上传路径
*/
private final static String UPLOAD_REPAIR_IMG_URL = "upload/image/repair/";
/**
* 上传路径
*/
private final static String UPLOAD_MESSAGE_IMG_URL = "upload/image/message/";
/**
* 上传路径
*/
private final static String UPLOAD_APPRAISE_IMG_URL = "upload/image/appraise/";
/**
* 上传图片
* @author wxs
* @version 1.0
* @time 2017年10月17日 下午1:01:06
*/
@RequestMapping(value = "/uploadImg", method = {RequestMethod.GET,RequestMethod.POST})
public @ResponseBody
Map<String,Object> uploadImg(String uploadStatus,HttpServletRequest request,RedirectAttributes redirectAttributes,String serverId) {
Map<String,Object> data = new HashMap<>();
//TODO
// String openId = (String) request.getSession().getAttribute("openId");
String openId = "wxs-hsd";
WxUser wxUser = wxUserService.findByOpId(openId);
//获取token
// Admin admin = adminService.getCurrent();
// Crop co=cropService.findByAdmin(admin.getId());
Crop co=cropService.findByAdmin(9l);
StringBuffer str = new StringBuffer();
str.append("https://qyapi.weixin.qq.com/cgi-bin/gettoken?corpid=");
str.append(co.getCropId());
str.append("&corpsecret=");
co.setSecret(co.getSecret());
str.append(co.getSecret());
String token=null;
try{
JSONObject jsontoken = JsonUtils.toJSONObject(HttpUtil.getInvoke(str.toString()));
int errcode=jsontoken.getInt("errcode");
if(errcode!=0){
addFlashMessage(redirectAttributes, Message.error("cropid或secret不正确"));
return data;
}
token = jsontoken.getString("access_token");
}catch(JSONException e){
addFlashMessage(redirectAttributes, Message.error("cropid或secret不正确"));
return data;
}
//获取临时素材
JSONObject json1=new JSONObject();
json1.put("media_id", serverId);
String getImg = "https://qyapi.weixin.qq.com/cgi-bin/media/get?access_token=" + token + "&media_id=" + serverId;
//JSONObject getImgJson = JsonUtils.toJSONObject(HttpUtil.getInvoke(getImg));
String imgSrc = "";
try{
URL u = new URL(getImg);
HttpURLConnection conn = (HttpURLConnection) u.openConnection();
conn.setRequestMethod("GET");
conn.connect();
BufferedInputStream bis = new BufferedInputStream(conn.getInputStream());
// 生成不同文件名称
String path = request.getSession().getServletContext().getRealPath("/");
String baseUploadPath = "";
String newFileName = UUID.randomUUID().toString() + ".jpg";
if("repair".equals(uploadStatus)){
baseUploadPath = path + UPLOAD_REPAIR_IMG_URL;
imgSrc = "/" + UPLOAD_REPAIR_IMG_URL + newFileName;
}
if("appraise".equals(uploadStatus)){
baseUploadPath = path + UPLOAD_APPRAISE_IMG_URL;
imgSrc = "/" + UPLOAD_APPRAISE_IMG_URL + newFileName;
}
if("message".equals(uploadStatus)){
baseUploadPath = path + UPLOAD_MESSAGE_IMG_URL;
imgSrc = "/" + UPLOAD_MESSAGE_IMG_URL + newFileName;
}
// String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"/";
data.put("imgSrc", imgSrc);
BufferedOutputStream bos = new BufferedOutputStream(new FileOutputStream(baseUploadPath + newFileName));
byte[] buf = new byte[1024];
int length = bis.read(buf);
while (length != -1) {
bos.write(buf, 0, length);
length = bis.read(buf);
}
bos.close();
bis.close();
} catch (MalformedURLException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
}
return data;
}
375
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
