zoukankan      html  css  js  c++  java
  • 微信上传图片

    <%@ 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;
    }


    }

  • 相关阅读:
    [原]RHCS集群的服务切换测试札记
    [原]从Clustering Factor说起
    命令行下设置IP地址的方法
    [原]SQL Server 2005 链接服务器使用一例
    [原]Oracle删除大表并回收空间的过程
    [转]从沙子到芯片:且看处理器是怎样炼成的
    [原] 在域环境中打开SSMS非常慢
    [原]将特定格式的string转换为DateTime
    [原] 在域环境中打开SSMS非常慢 续
    [转]Linux 下判断Server 内存是否不足
  • 原文地址:https://www.cnblogs.com/xuehen/p/4612908.html
Copyright © 2011-2022 走看看