微相册记录
<%-- Created by IntelliJ IDEA. User: Administrator Date: 2017/11/15 Time: 17:15 To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@ page import="java.util.HashMap" %> <%@ page import="com.binf.project.om201607.util.WxLocalUtil" %> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="css/bootstrap.min.css"> <title>上传图片</title> <% String fromopenid = (String) request.getSession().getAttribute("fromopenid"); if ("fromopenid".equals(fromopenid)) fromopenid = request.getParameter("fromopenid"); String fullPath = request.getRequestURL().toString(); String params = request.getQueryString()==null ? "" : "?" + request.getQueryString(); HashMap aMap = WxLocalUtil.getWxConfig(fullPath + params); %> <style> .buttonBox{ margin: 20px 0; } div.btn{ border:0; box-shadow: 5px 5px 4px #ccc; padding: 8px 16px; border-radius: 10px; color: #999;; } .picBox{ /*height: 150px;*/ margin-bottom: 20px; } .picBox img{ display: block; margin: 0 auto; max- 100%; max-height: 100%; } .thumbnail{ height: 100%; border-radius: 20px; padding: 0; margin: 0; overflow: hidden; border: 3px solid #fff; } /*上传loading动画*/ .uploading{ position: fixed; 100%; height: 100%; background-color: rgba(0,0,0,0.7); left: 0;top: 0; } .spinner { margin-top: 200px; 40px; height: 40px; position: absolute; left: 50%; margin-left: -20px; } .container1 > div, .container2 > div, .container3 > div { 8px; height: 8px; background-color: white; border-radius: 100%; position: absolute; -webkit-animation: bouncedelay 1.2s infinite ease-in-out; animation: bouncedelay 1.2s infinite ease-in-out; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .spinner .spinner-container { position: absolute; 100%; height: 100%; } .container2 { -webkit-transform: rotateZ(45deg); transform: rotateZ(45deg); } .container3 { -webkit-transform: rotateZ(90deg); transform: rotateZ(90deg); } .circle1 { top: 0; left: 0; } .circle2 { top: 0; right: 0; } .circle3 { right: 0; bottom: 0; } .circle4 { left: 0; bottom: 0; } .container2 .circle1 { -webkit-animation-delay: -1.1s; animation-delay: -1.1s; } .container3 .circle1 { -webkit-animation-delay: -1.0s; animation-delay: -1.0s; } .container1 .circle2 { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; } .container2 .circle2 { -webkit-animation-delay: -0.8s; animation-delay: -0.8s; } .container3 .circle2 { -webkit-animation-delay: -0.7s; animation-delay: -0.7s; } .container1 .circle3 { -webkit-animation-delay: -0.6s; animation-delay: -0.6s; } .container2 .circle3 { -webkit-animation-delay: -0.5s; animation-delay: -0.5s; } .container3 .circle3 { -webkit-animation-delay: -0.4s; animation-delay: -0.4s; } .container1 .circle4 { -webkit-animation-delay: -0.3s; animation-delay: -0.3s; } .container2 .circle4 { -webkit-animation-delay: -0.2s; animation-delay: -0.2s; } .container3 .circle4 { -webkit-animation-delay: -0.1s; animation-delay: -0.1s; } @-webkit-keyframes bouncedelay { 0%, 80%, 100% { -webkit-transform: scale(0.0) } 40% { -webkit-transform: scale(1.0) } } @keyframes bouncedelay { 0%, 80%, 100% { transform: scale(0.0); -webkit-transform: scale(0.0); } 40% { transform: scale(1.0); -webkit-transform: scale(1.0); } } .title{ font-size: 16px; text-align: center; line-height: 28px; margin: 20px 0 10px 0; color: #999; } div.selectCategory{ position: fixed; left: 50%;top: 150px;; 80%;margin-left: -40%; height: 200px; background-color: #fff; border-radius: 20px; box-shadow: 10px 10px 10px #ccc; } .selectBox{ margin-top: 20px; 80%;margin-left: 10%; padding-right: 10px; border-radius: 17px; overflow: hidden; height: 34px; background-color: #e4e4e4; } select#selectOptionBox{ border: 0; outline: none!important; background-color: #e4e4e4; box-shadow: none; } .selectBtn{ 40%;margin-left: 30%; position: absolute; bottom: 30px; background-color: #f2f2f2; box-shadow: none; } .delPic{ position: absolute; right: 12px;;top: -3px; background-color: #0080e8; color: #fff; 20px;height: 20px; border-radius: 50%; text-align: center; display: block; } </style> </head> <body> <div class="containet-fluid"> <div class="buttonBox row"> <div class="select btn btn-default col-xs-3 col-xs-offset-2" id="selectPic">添加图片</div> <div class="confirm btn btn-default col-xs-3 col-xs-offset-2" id="upload">上传</div> </div> <h1 class="title">所有从相册中添加的图片</h1> <div class="contentBox clearfix"></div> </div> <%--选择分类--%> <div class="selectCategory hidden"> <h1 class="title" style="color: white;padding-left: 10%;border-color: white;">选择分类</h1> <div class="selectBox"> <select class="form-control" id="selectOptionBox"> </select> </div> <div class="selectBtn btn btn-default" id="confirm">确认上传</div> </div> <%--上传加载中动画--%> <div class="uploading hidden"> <div class="spinner"> <div class="spinner-container container1"> <div class="circle1"></div> <div class="circle2"></div> <div class="circle3"></div> <div class="circle4"></div> </div> <div class="spinner-container container2"> <div class="circle1"></div> <div class="circle2"></div> <div class="circle3"></div> <div class="circle4"></div> </div> <div class="spinner-container container3"> <div class="circle1"></div> <div class="circle2"></div> <div class="circle3"></div> <div class="circle4"></div> </div> </div> <p style="text-align: center;position: absolute;color: white;100%;top: 280px;">上传中，请稍后...</p> </div> <script src="js/zepto.min.js"></script> <script src="js/config.js"></script> <script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script> <script> var userConfig = { openId: '<%=fromopenid%>', appId: '<%=aMap.get("appid")%>', timestamp: '<%=aMap.get("timestamp")%>', nonceStr: '<%=aMap.get("noncestr")%>', signature: '<%=aMap.get("signature")%>' } </script> <script> (function(){ var serverIds = []; wx.config({ //debug: true, appId: userConfig.appId, timestamp: userConfig.timestamp, nonceStr: userConfig.nonceStr, signature: userConfig.signature, jsApiList: [ 'checkJsApi', 'chooseImage', 'previewImage', 'uploadImage', 'getLocalImgData'] }); function displayPic(localId,id){ html = '<div class="picBox col-xs-4" imgid="'+id+'">'+ '<span class="delPic">X</span>'+ '<a href="##" class="thumbnail">'+ '<img src="'+localId+'" alt="">'+ '</a>'+ '</div>'; $('.contentBox').append(html); } var id = 0; function uploadImg(localIds){ var localId = localIds.pop(); wx.uploadImage({ localId: localId, // 需要上传的图片的本地ID，由chooseImage接口获得 isShowProgressTips: 1, // 默认为1，显示进度提示 success: function (res) { serverIds.push(res.serverId); // 返回图片的服务器端ID // alert(serverIds.length+" ok"); displayPic(localId,id); id++; if(localIds.length){ uploadImg(localIds); }else { $('#selectPic').attr("disabled",false); } } }); } $('#selectPic').click(function(){ $(this).attr("disabled",true); wx.chooseImage({ count: 9, // 默认9 sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有 sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有 success: function (res) { var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片 //上传图片 uploadImg(localIds); } }); }); $('#upload').click(function(){ $('.selectCategory').removeClass('hidden'); $.post(config.SERVER.HOSTNAME+config.INTERFACE.GETIMGCATEGORY,function(data){ var html = ''; console.log(data.WeixiangceCategorys) for(var i=0;i<data.WeixiangceCategorys.length;i++){ html += '<option cid="'+data.WeixiangceCategorys[i].cid+'">'+data.WeixiangceCategorys[i].title+'</option>' } $('#selectOptionBox').html(html); },"json"); }); $('#confirm').click(function(){ $('.uploading').addClass('hidden'); $('.uploading').removeClass('hidden'); var serverIdsStr = serverIds.join(); var category = $('#selectOptionBox').find('option').not(function(){ return !this.selected }).attr('cid'); // alert(serverIds.length); $.post(config.SERVER.HOSTNAME+config.INTERFACE.UPLOAD,{imgid:serverIdsStr,category:category},function(data){ $('.uploading').addClass('hidden'); serverIds = []; $('.contentBox').html(); if(data.errorCode == '0'){ alert(data.data); location.href = config.SERVER.HOSTNAME+ '/app/weixiangce/back.jsp'; }else if(data.errorCode == '1'){ alert(data.errorMsg); } },"json") }); $('.contentBox').delegate('.delPic','click',function(){ var imgid = $(this).parent().attr('imgid'); $(this).parent().remove(); serverIds.splice(imgid,1); }); }()); </script> </body> </html>