美文网首页
调取微信拍照,上传图片的接口

调取微信拍照,上传图片的接口

作者: _daraDu | 来源:发表于2018-07-23 11:09 被阅读0次
    • HTML如下
    <div class="weui_cells weui_cells_form">
        <div class="weui_cell"><!--图片上传-->
            <div class="weui_cell_hd"><label class="weui_label">上传图片</label></div>
                <div class="weui_cell_bd weui_cell_primary showImage" style="height: auto;">   
                    <a href="javascript:void(0);" id="chooseImage" style="overflow:scroll;">
                        <img src='${ctx}/styles/iconfont/tu_04.jpg' width='65' height='65'/>
                    </a>
                </div>
            </div>
         </div>
    </div>
    
    • js
    <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <script>
    //微信上传图片接口
        var data = null;
        var url = location.href.split('#')[0];
        var previewImagelist2 = new Array();
        var filePathlist = new Array();
        var wishCode = "gh_2838e6f79b11";
        JssdkService.getSignature(url,wishCode,function(res){
            if(res.responseCode != 0){
                alert(res.responseText);
            }else{
                data = $.parseJSON(res.responseText); 
    
                var timestamp = data.timestamp;
                var nonceStr = data.nonceStr;
                var signature = data.signature;
                var appId = res.responseParam1;
    
                wx.config({
                    debug: false,  
                    appId: appId,
                    timestamp: timestamp,
                    nonceStr: nonceStr,
                    signature: signature,
                    jsApiList: [
                        'checkJsApi',
                        'onMenuShareAppMessage',
                        'hideMenuItems',
                        'chooseImage',  
                        'previewImage',
                        'uploadImage',  
                    ]
                });
            }
        });
        
        wx.ready(function () {
            wx.hideMenuItems({
                menuList: [
                    'menuItem:share:appMessage',
                    'menuItem:share:timeline',
                    'menuItem:share:qq',
                    'menuItem:share:weiboApp'
                ] // 要隐藏的菜单项,只能隐藏“传播类”和“保护类”按钮,所有menu项见附录3
            });
            
            var images = {
                localId: [],
                serverId: []
            };
            document.querySelector('#chooseImage').onclick = function () {
                wx.chooseImage({
                  success: function (res) {
                    //res.localIds 是一个数组 保存了用户一次性选择的所有图片的信息  
                    images.localId = res.localIds;//把图片的路径保存在images[localId]中--图片本地的id信息,用于上传图片到微信浏览器时使用
                    //alert('已选择 ' + res.localIds.length + '张图片 ');
                    
                    //===上传
                    if (images.localId.length == 0) {
                      alert("<fmt:message key='post.publishpost.pleaseselectimg'/>");
                      return;
                    }
                    var i = 0, length = images.localId.length;
                    images.serverId = [];
                    
                    function upload() {
                      wx.uploadImage({
                        localId: images.localId[i],
                        success: function (res) {
                            i++;
                            var realpath = $("#fm_realpath").val();
                            var wishCode = "gh_2838e6f79b11";
                            realpath = realpath.replace(/\\/g, "/");
                            images.serverId.push(res.serverId);
                            //下载刚刚上传的图片?dwr接口
                            //JssdkService.getMedia(res.serverId,realpath+'/mcupload', function(res){
                            JssdkService.getMediaNoPeople(res.serverId,realpath+'/mcupload', wishCode,function(res){    
                            //  alert(res.substr(45));
                                var path = res.responseParam1.split("mecwish")[1];
                                
                                if(path != null && path.length != 0){
                                    filePathlist.push(path);
                                    previewImagelist2.push(window.location.protocol+"//"+window.location.host+"${ctx}"+path);
                                    var path_thumb = path.replace("/mcupload/","/mcupload/_thumb/");
                                    var htmlitem = "";
                                    htmlitem += "<a href=\"javascript:previewImage2('"+window.location.protocol+"//"+window.location.host+"${ctx}"+path+"')\">";
                                    htmlitem += "<img style='' src='${ctx}"+path_thumb+"'/>";
                                    htmlitem += "</a>";
    
                                    $(".showImage").append(htmlitem);
                                }
                            });
    
                            if (i < length) {
                            upload();
                            }
                        },
                        fail: function (res) {
                          alert(JSON.stringify(res));
                        }
                      });
                    }
                    upload(); 
                  }
                });
            };
            
        });
        wx.error(function (res) {
            alert(res.errMsg);
        });
        
        function previewImage(obj) {
            var currentimg = obj.title;
            previewImagelist = [];
            $(obj).parent().find("img").each(function(){
                previewImagelist.push(this.title);
            });
            wx.previewImage({
                current: currentimg,
                urls: previewImagelist
            });
        }
        function previewImage2(currentimg) {
            wx.previewImage({
              current: currentimg,
              urls: previewImagelist2
            });
        }
    </script>
    
    
    
    

    相关文章

      网友评论

          本文标题:调取微信拍照,上传图片的接口

          本文链接:https://www.haomeiwen.com/subject/uqmdmftx.html