微信上传图片
2015-07-01 12:14
645 查看
<%@ page language="java" pageEncoding="utf-8"%>
<%@ include file="/WEB-INF/jsp/base/taglibs.jsp" %>
<%@ taglib uri="http://java.fckeditor.net" prefix="FCK" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@include file="/WEB-INF/jsp/base/head_backendVersion2.jsp"%>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<%@include file="/WEB-INF/jsp/base/head.jsp"%>
<link href="<%=request.getContextPath()%>/css/lightBox.css" rel="stylesheet" type="text/css"></link>
<title>图片上传</title>
<link href="<%=request.getContextPath()%>/css/wechat/common.css" rel="stylesheet" type="text/css" />
<link href="<%=request.getContextPath()%>/css/wechat/style.css" rel="stylesheet" type="text/css" />
<link href="<%=request.getContextPath()%>/css/wechat/form.css" rel="stylesheet" type="text/css" />
<link href="<%=request.getContextPath()%>/css/wechat/exhibition.css" rel="stylesheet" type="text/css" />
<script type='text/javascript' src='<%=request.getContextPath()%>/js/wechat/jquery-1.11.1.min.js'></script>
<script type='text/javascript' src='<%=request.getContextPath()%>/js/wechat/main.js'></script>
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script>
wx.config({
debug: false, // 关闭调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: '${appId}', // 必填，公众号的唯一标识
timestamp: '${timestamp }', // 必填，生成签名的时间戳
nonceStr: '${nonceStr }', // 必填，生成签名的随机串
signature: '${signature }',// 必填，签名，见附录1
jsApiList: [
'checkJsApi',
'chooseImage',
'previewImage',
'uploadImage',
'downloadImage',
'getNetworkType'
] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
});
wx.ready(function () {
// 1 判断当前版本是否支持指定 JS 接口，支持批量判断
wx.checkJsApi({
jsApiList: [
'getNetworkType'
],
success: function (res) {
//alert("3------"+JSON.stringify(res));
}
});
// 5 图片接口
// 5.1 拍照、本地选图
var images = {
localId: [],
serverId: []
};
function chooseOneImage(){
var flag = false;
if(images.localId.length == 0 ||
(images.localId.length == 1 && window.confirm("已上传一张图片,是否重新上传？"))){
flag = true;
}
if(flag){
wx.chooseImage({
success: function (res) {
images.localId = res.localIds;
//alert('已选择 ' + res.localIds.length + ' 张图片');
if(sign=="license"){
if(res.localIds.length == 1){
window.setTimeout(uploadFile, 50);
}else{
if(window.confirm("只能选择一张图片,是否重新选择？")){
chooseOneImage();
}
}
}else if(sign=="identity"){
if(res.localIds.length < 3){
window.setTimeout(uploadFile, 50);
}else{
if(window.confirm("最多选择两张图片,是否重新选择？")){
chooseOneImage();
}
}
}else if(sign=="product"){
if(res.localIds.length < 4){
window.setTimeout(uploadFile, 50);
}else{
if(window.confirm("最多选择三张图片,是否重新选择？")){
chooseOneImage();
}
}
}
}
});
}
}
var sign;
document.querySelector('#chooseImage').onclick = function () {
sign="license";
chooseOneImage();//上传营业执照图片
};
document.querySelector('#chooseImage1').onclick = function () {
sign="identity";
chooseOneImage();//上传身份证图片
};
document.querySelector('#chooseImage2').onclick = function () {
sign="product";
chooseOneImage();//上传产品图片
};
// 5.3 上传图片
// document.querySelector('#uploadImage').onclick =
function uploadFile () {
alert(sign)
if (images.localId.length == 0) {
alert('2--请先选择图片');
return;
}
var i = 0, length = images.localId.length;
images.serverId = [];
function upload() {
wx.uploadImage({
localId: images.localId[i],
success: function (res) {
i++;
alert('已上传：' + i + '/' + length);
alert("上传成功");
images.serverId.push(res.serverId);
// 将 serverId 复制到隐藏域中以便传到后台
//alert('length--'+length);
if(sign=="license"){
$("#serverId").val(images.serverId);
}else if(sign=="identity"){
$("#serverId1").val(images.serverId);
}else if(sign=="product"){
$("#serverId2").val(images.serverId);
}
if (i < length) {
alert(i);
upload();
}
},
fail: function (res) {
alert(JSON.stringify(res));
}
});
}
upload();
};
});
</script>
<title>Insert title here</title>
</head>
<body>
<form action ="<%=request.getContextPath()%>/wechatfront2/imgUp.do" method="post">
<li style="padding-left:10px;">
<a href="javascript:;" class="ui-block" id="chooseImage">
<p>
<img class="f_l MR5" height="22" src="<%=request.getContextPath()%>/images/wechat/icon/arrow7.png" />
<span class="C9" style="font-size:20px">请上传营业执照图片 </span>
</p>
<input type="hidden" id="serverId" name="serverId" value="" />
</a>
</li>
<li style="padding-left:10px;">
<a href="javascript:;" class="ui-block" id="chooseImage1">
<p>
<img class="f_l MR5" height="22" src="<%=request.getContextPath()%>/images/wechat/icon/arrow7.png" />
<span class="C9" style="font-size:20px">请上传身份证图片</span>
</p>
<input type="hidden" id="serverId1" name="serverId1" value="" />
</a>
</li>
<li style="padding-left:10px;">
<a href="javascript:;" class="ui-block" id="chooseImage2">
<p>
<img class="f_l MR5" height="22" src="<%=request.getContextPath()%>/images/wechat/icon/arrow7.png" />
<span class="C9" style="font-size:20px">请上传产品图片</span>
</p>
<input type="hidden" id="serverId2" name="serverId2" value="" />
</a>
</li>
<input type="submit" value="保存"/>
</form>
</body>
</html>
package site.action.ecom.front.wechat2;
import java.util.TreeMap;
import org.springframework.beans.factory.annotation.Autowired;
import site.action.ecom.front.wechat.WechatBaseAction;
import site.base.service.BaseService;
import site.common.util.wechat.WechatGlobalUtil;
import site.service.ecom.wechat.BizPictureService;
import site.service.ecom.wechat.BizProjectService;
import site.vo.ecom.wechat.BizPictureBean;
import site.vo.ecom.wechat.BizProjectBizBean;
public class ImageAction extends WechatBaseAction{
/**
*
*/
private static final long serialVersionUID = 1L;
@Autowired
private BizPictureService bizPictureService;
private BizProjectBizBean bizProjectBizBean;
//公众号的唯一标识
private String appId;
//生成签名的时间戳
private long timestamp;
//生成签名的随机串
private String nonceStr;
// 必填，签名，见附录1
private String signature;
//上传营业执照图片
private String serverId;
//上传身份证图片
private String serverId1;
//上传产品图片
private String serverId2;
public String goToImgUp(){
String jsapi_ticket = null;
try {
jsapi_ticket = WechatGlobalUtil.getJsapiTicket();//获取jsapi的票据
} catch (Exception e) {
e.printStackTrace();
}
appId = WechatGlobalUtil.getAppId();
nonceStr = WechatGlobalUtil.createRandomStr();//获取16位随机数
timestamp = WechatGlobalUtil.getTimestamp();//获取当前时间戳
String url = request.getRequestURL().toString();//当前访问页面的全路径
TreeMap<String, String> treeMap = new TreeMap<String, String>();
treeMap.put("timestamp", String.valueOf(timestamp));
treeMap.put("url", url);
treeMap.put("jsapi_ticket", jsapi_ticket);
treeMap.put("noncestr", nonceStr);
signature = WechatGlobalUtil.createSign(treeMap);
//根据项目标识获取公告信息
//bizMessageBean = noticeMessageService.findMessageByType(BizMessageBean.MESSAGE_TYPE_PROJECT);
return "goToImgUp";
}
public String imgUp(){
try{
BizPictureBean bizPrictureBean=new BizPictureBean();
//上传营业执照图片
if(null!=serverId && ""!=serverId){
String[] ids=serverId.split(",");
for(String id:ids){
bizPrictureBean.setPicPath(getFileSavePath(id));
bizPrictureBean.setRelType("PROJECT");
//bizPrictureBean.setRelId(relId);
bizPrictureBean.setPicType("license");
bizPictureService.execute(bizPrictureBean, BaseService.COMMAND_SAVE);
}
}
//上传身份证图片
if(null!=serverId1 && ""!=serverId1){
String[] ids=serverId1.split(",");
for(String id:ids){
Integer memberId = Integer.valueOf((""+getCurrentMember().getId()));
bizPrictureBean.setPicPath(getFileSavePath(id));
bizPrictureBean.setRelType("MEMBER");
bizPrictureBean.setRelId(Long.valueOf(memberId));
bizPrictureBean.setPicType("identity");
bizPictureService.execute(bizPrictureBean, BaseService.COMMAND_SAVE);
}
}
//上传产品图片
if(null!=serverId2 && ""!=serverId2){
String[] ids=serverId2.split(",");
for(String id:ids){
bizPrictureBean.setPicPath(getFileSavePath(id));
bizPrictureBean.setRelType("PROJECT");
//bizPrictureBean.setRelId(relId);
bizPrictureBean.setPicType("product");
bizPictureService.execute(bizPrictureBean, BaseService.COMMAND_SAVE);
}
}
return "success";
}catch(Exception e){
e.printStackTrace();
return "error";
}
}
public BizProjectBizBean getBizProjectBizBean() {
return bizProjectBizBean;
}
public void setBizProjectBizBean(BizProjectBizBean bizProjectBizBean) {
this.bizProjectBizBean = bizProjectBizBean;
}
public String getAppId() {
return appId;
}
public void setAppId(String appId) {
this.appId = appId;
}
public long getTimestamp() {
return timestamp;
}
public void setTimestamp(long timestamp) {
this.timestamp = timestamp;
}
public String getNonceStr() {
return nonceStr;
}
public void setNonceStr(String nonceStr) {
this.nonceStr = nonceStr;
}
public String getSignature() {
return signature;
}
public void setSignature(String signature) {
this.signature = signature;
}
public String getServerId() {
return serverId;
}
public void setServerId(String serverId) {
this.serverId = serverId;
}
public String getServerId1() {
return serverId1;
}
public void setServerId1(String serverId1) {
this.serverId1 = serverId1;
}
public String getServerId2() {
return serverId2;
}
public void setServerId2(String serverId2) {
this.serverId2 = serverId2;
}
}
<%@ include file="/WEB-INF/jsp/base/taglibs.jsp" %>
<%@ taglib uri="http://java.fckeditor.net" prefix="FCK" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@include file="/WEB-INF/jsp/base/head_backendVersion2.jsp"%>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<%@include file="/WEB-INF/jsp/base/head.jsp"%>
<link href="<%=request.getContextPath()%>/css/lightBox.css" rel="stylesheet" type="text/css"></link>
<title>图片上传</title>
<link href="<%=request.getContextPath()%>/css/wechat/common.css" rel="stylesheet" type="text/css" />
<link href="<%=request.getContextPath()%>/css/wechat/style.css" rel="stylesheet" type="text/css" />
<link href="<%=request.getContextPath()%>/css/wechat/form.css" rel="stylesheet" type="text/css" />
<link href="<%=request.getContextPath()%>/css/wechat/exhibition.css" rel="stylesheet" type="text/css" />
<script type='text/javascript' src='<%=request.getContextPath()%>/js/wechat/jquery-1.11.1.min.js'></script>
<script type='text/javascript' src='<%=request.getContextPath()%>/js/wechat/main.js'></script>
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script>
wx.config({
debug: false, // 关闭调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: '${appId}', // 必填，公众号的唯一标识
timestamp: '${timestamp }', // 必填，生成签名的时间戳
nonceStr: '${nonceStr }', // 必填，生成签名的随机串
signature: '${signature }',// 必填，签名，见附录1
jsApiList: [
'checkJsApi',
'chooseImage',
'previewImage',
'uploadImage',
'downloadImage',
'getNetworkType'
] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
});
wx.ready(function () {
// 1 判断当前版本是否支持指定 JS 接口，支持批量判断
wx.checkJsApi({
jsApiList: [
'getNetworkType'
],
success: function (res) {
//alert("3------"+JSON.stringify(res));
}
});
// 5 图片接口
// 5.1 拍照、本地选图
var images = {
localId: [],
serverId: []
};
function chooseOneImage(){
var flag = false;
if(images.localId.length == 0 ||
(images.localId.length == 1 && window.confirm("已上传一张图片,是否重新上传？"))){
flag = true;
}
if(flag){
wx.chooseImage({
success: function (res) {
images.localId = res.localIds;
//alert('已选择 ' + res.localIds.length + ' 张图片');
if(sign=="license"){
if(res.localIds.length == 1){
window.setTimeout(uploadFile, 50);
}else{
if(window.confirm("只能选择一张图片,是否重新选择？")){
chooseOneImage();
}
}
}else if(sign=="identity"){
if(res.localIds.length < 3){
window.setTimeout(uploadFile, 50);
}else{
if(window.confirm("最多选择两张图片,是否重新选择？")){
chooseOneImage();
}
}
}else if(sign=="product"){
if(res.localIds.length < 4){
window.setTimeout(uploadFile, 50);
}else{
if(window.confirm("最多选择三张图片,是否重新选择？")){
chooseOneImage();
}
}
}
}
});
}
}
var sign;
document.querySelector('#chooseImage').onclick = function () {
sign="license";
chooseOneImage();//上传营业执照图片
};
document.querySelector('#chooseImage1').onclick = function () {
sign="identity";
chooseOneImage();//上传身份证图片
};
document.querySelector('#chooseImage2').onclick = function () {
sign="product";
chooseOneImage();//上传产品图片
};
// 5.3 上传图片
// document.querySelector('#uploadImage').onclick =
function uploadFile () {
alert(sign)
if (images.localId.length == 0) {
alert('2--请先选择图片');
return;
}
var i = 0, length = images.localId.length;
images.serverId = [];
function upload() {
wx.uploadImage({
localId: images.localId[i],
success: function (res) {
i++;
alert('已上传：' + i + '/' + length);
alert("上传成功");
images.serverId.push(res.serverId);
// 将 serverId 复制到隐藏域中以便传到后台
//alert('length--'+length);
if(sign=="license"){
$("#serverId").val(images.serverId);
}else if(sign=="identity"){
$("#serverId1").val(images.serverId);
}else if(sign=="product"){
$("#serverId2").val(images.serverId);
}
if (i < length) {
alert(i);
upload();
}
},
fail: function (res) {
alert(JSON.stringify(res));
}
});
}
upload();
};
});
</script>
<title>Insert title here</title>
</head>
<body>
<form action ="<%=request.getContextPath()%>/wechatfront2/imgUp.do" method="post">
<li style="padding-left:10px;">
<a href="javascript:;" class="ui-block" id="chooseImage">
<p>
<img class="f_l MR5" height="22" src="<%=request.getContextPath()%>/images/wechat/icon/arrow7.png" />
<span class="C9" style="font-size:20px">请上传营业执照图片 </span>
</p>
<input type="hidden" id="serverId" name="serverId" value="" />
</a>
</li>
<li style="padding-left:10px;">
<a href="javascript:;" class="ui-block" id="chooseImage1">
<p>
<img class="f_l MR5" height="22" src="<%=request.getContextPath()%>/images/wechat/icon/arrow7.png" />
<span class="C9" style="font-size:20px">请上传身份证图片</span>
</p>
<input type="hidden" id="serverId1" name="serverId1" value="" />
</a>
</li>
<li style="padding-left:10px;">
<a href="javascript:;" class="ui-block" id="chooseImage2">
<p>
<img class="f_l MR5" height="22" src="<%=request.getContextPath()%>/images/wechat/icon/arrow7.png" />
<span class="C9" style="font-size:20px">请上传产品图片</span>
</p>
<input type="hidden" id="serverId2" name="serverId2" value="" />
</a>
</li>
<input type="submit" value="保存"/>
</form>
</body>
</html>
package site.action.ecom.front.wechat2;
import java.util.TreeMap;
import org.springframework.beans.factory.annotation.Autowired;
import site.action.ecom.front.wechat.WechatBaseAction;
import site.base.service.BaseService;
import site.common.util.wechat.WechatGlobalUtil;
import site.service.ecom.wechat.BizPictureService;
import site.service.ecom.wechat.BizProjectService;
import site.vo.ecom.wechat.BizPictureBean;
import site.vo.ecom.wechat.BizProjectBizBean;
public class ImageAction extends WechatBaseAction{
/**
*
*/
private static final long serialVersionUID = 1L;
@Autowired
private BizPictureService bizPictureService;
private BizProjectBizBean bizProjectBizBean;
//公众号的唯一标识
private String appId;
//生成签名的时间戳
private long timestamp;
//生成签名的随机串
private String nonceStr;
// 必填，签名，见附录1
private String signature;
//上传营业执照图片
private String serverId;
//上传身份证图片
private String serverId1;
//上传产品图片
private String serverId2;
public String goToImgUp(){
String jsapi_ticket = null;
try {
jsapi_ticket = WechatGlobalUtil.getJsapiTicket();//获取jsapi的票据
} catch (Exception e) {
e.printStackTrace();
}
appId = WechatGlobalUtil.getAppId();
nonceStr = WechatGlobalUtil.createRandomStr();//获取16位随机数
timestamp = WechatGlobalUtil.getTimestamp();//获取当前时间戳
String url = request.getRequestURL().toString();//当前访问页面的全路径
TreeMap<String, String> treeMap = new TreeMap<String, String>();
treeMap.put("timestamp", String.valueOf(timestamp));
treeMap.put("url", url);
treeMap.put("jsapi_ticket", jsapi_ticket);
treeMap.put("noncestr", nonceStr);
signature = WechatGlobalUtil.createSign(treeMap);
//根据项目标识获取公告信息
//bizMessageBean = noticeMessageService.findMessageByType(BizMessageBean.MESSAGE_TYPE_PROJECT);
return "goToImgUp";
}
public String imgUp(){
try{
BizPictureBean bizPrictureBean=new BizPictureBean();
//上传营业执照图片
if(null!=serverId && ""!=serverId){
String[] ids=serverId.split(",");
for(String id:ids){
bizPrictureBean.setPicPath(getFileSavePath(id));
bizPrictureBean.setRelType("PROJECT");
//bizPrictureBean.setRelId(relId);
bizPrictureBean.setPicType("license");
bizPictureService.execute(bizPrictureBean, BaseService.COMMAND_SAVE);
}
}
//上传身份证图片
if(null!=serverId1 && ""!=serverId1){
String[] ids=serverId1.split(",");
for(String id:ids){
Integer memberId = Integer.valueOf((""+getCurrentMember().getId()));
bizPrictureBean.setPicPath(getFileSavePath(id));
bizPrictureBean.setRelType("MEMBER");
bizPrictureBean.setRelId(Long.valueOf(memberId));
bizPrictureBean.setPicType("identity");
bizPictureService.execute(bizPrictureBean, BaseService.COMMAND_SAVE);
}
}
//上传产品图片
if(null!=serverId2 && ""!=serverId2){
String[] ids=serverId2.split(",");
for(String id:ids){
bizPrictureBean.setPicPath(getFileSavePath(id));
bizPrictureBean.setRelType("PROJECT");
//bizPrictureBean.setRelId(relId);
bizPrictureBean.setPicType("product");
bizPictureService.execute(bizPrictureBean, BaseService.COMMAND_SAVE);
}
}
return "success";
}catch(Exception e){
e.printStackTrace();
return "error";
}
}
public BizProjectBizBean getBizProjectBizBean() {
return bizProjectBizBean;
}
public void setBizProjectBizBean(BizProjectBizBean bizProjectBizBean) {
this.bizProjectBizBean = bizProjectBizBean;
}
public String getAppId() {
return appId;
}
public void setAppId(String appId) {
this.appId = appId;
}
public long getTimestamp() {
return timestamp;
}
public void setTimestamp(long timestamp) {
this.timestamp = timestamp;
}
public String getNonceStr() {
return nonceStr;
}
public void setNonceStr(String nonceStr) {
this.nonceStr = nonceStr;
}
public String getSignature() {
return signature;
}
public void setSignature(String signature) {
this.signature = signature;
}
public String getServerId() {
return serverId;
}
public void setServerId(String serverId) {
this.serverId = serverId;
}
public String getServerId1() {
return serverId1;
}
public void setServerId1(String serverId1) {
this.serverId1 = serverId1;
}
public String getServerId2() {
return serverId2;
}
public void setServerId2(String serverId2) {
this.serverId2 = serverId2;
}
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 微信开发定时刷新accessToken
- C#的Xamarin开发小米盒子应用并以WCF实现微信通知
- 微信开发 java
- Xcode6集成微信SDK过程出错解决办法
- 微信背后的人性观
- iOS第三方支付－微信支付
- 微信java开发（nat123配制本地环境）
- inux关于readlink函数获取运行路径的小程序
- inux关于readlink函数获取运行路径的小程序
- 微信浏览器轮播图的使用经验
- 微信开放平台之公众号第三方平台开发及全网发布验证
- Android；Share SDK微信分享中遇到的问题以及解决方法
- 微信jssdk已无力吐槽
- 高仿微信实现左滑显示删除按钮功能
- 高仿微信本地图片选择器
- 微信公众号一键关注解决办法
- 微信支付（0923更新）商户支付密钥key的生成与设置
- 在iPhone4的微信，切换效果时背景会闪一下
- 微信业务处理：职责链模式
- css3模拟微信摇一摇