jqweui 加微信图片上传接口实现图片上传

jqweui 加微信图片上传接口实现图片上传

jqweui简介

jQuery WeUI 是专为微信公众账号开发而设计的一个简洁而强大的UI库，包含全部WeUI官方的CSS组件，并且额外提供了大量的拓展组件，丰富的组件库可以极大减少前端开发时间。
下载地址 github

首先在页面中需要引入一下js和css

//jqweui css
<link rel="stylesheet" href="lib/weui.min.css">
<link rel="stylesheet" href="css/jquery-weui.css">
<link rel="stylesheet" href="css/demos.css">
<link rel="stylesheet" href="css/style.css">
//jqweui 的js
<script src="lib/jquery-2.1.4.js"></script>
<script src="js/jquery-weui.js"></script>
<script src="lib/fastclick.js"></script>
//调用微信jsApi接口需要的js
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js">
</script> 

html代码

   <div class="weui-cells weui-cells_form">
          <div class="weui-cells__title">
            图片上传2
        </div>
        <div class="weui-cell">
            <div class="weui-cell__bd">
                <div class="weui-uploader">
                    <div class="weui-uploader__bd">
                        <ul class="weui-uploader__files" id="uploaderFiles1">

                        </ul>
                        <div class="weui-uploader__input-box" id="chosse">
  
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

初始化微信接口

获取调用接口需要的东西请看另这篇文章

 //初始化配置
wx.config({
    debug: false,
    appId: "{$sign['appId']}",
    timestamp: "{$sign['timestamp']}",
    nonceStr: "{$sign['nonceStr']}",
    signature: "{$sign['signature']}",
    jsApiList: [
      // 所有要调用的 API 都要加到这个列表中
    'chooseImage',    
    'previewImage',    
    'uploadImage',    
    'downloadImage', 
    ]
});

js代码

$('#chosse').click( function() {
    // 用来判断是不是ios
    var ios = window.__wxjs_is_wkwebview;

    // 选择图片
    wx.chooseImage({
        count:4, //一次允许选择几张图片
        success: function (res) {
            var localIds = res.localIds;
            var i = 0;
            // 已选图片个数
            var length = localIds.length;
            // 执行图片上传
            upload();
            function upload() {
                if(ios) {
                    wx.getLocalImgData({
                        localId: localIds[i], // 图片的localID
                        success: function (res) {
                            localData = res.localData; // localData是图片的base64数据，可以用img标签显示
                            // 展示预览图  
                            var $preview = $('<li class="weui-uploader__file weui-uploader__file_status" style="background-image:url('+localData+')" imgurl = "'+localData+'"><div class="weui-uploader__file-content">0%</div></li>');  
                            $('#uploaderFiles1').append($preview);
                            // 预览
                            $('.weui-uploader__file').click(function(){
                                var imgurl = $(this).attr('imgurl');
                                wx.previewImage({
                                    current: imgurl, // 当前显示图片的http链接
                                    urls: [imgurl] // 需要预览的图片http链接列表
                                });
                            });
                            // 上传动画
                            var progress = 0;
                            function uploading() {  
                                progress = progress + 3;
                                $preview.find('.weui-uploader__file-content').text(progress + '%');  
                                if (progress < 95 ) {  
                                    setTimeout(uploading, 10);  
                                } 
                            }
                            uploading();//执行上传动画
                            wx.uploadImage({
                                localId: localIds[i].toString(), // 需要上传的图片的本地ID，由chooseImage接口获得
                                isShowProgressTips: 0, // 默认为1，显示进度提示
                                success: function (res) {
                                    if (i == length) {
                                        $.toast("上传成功");
                                    }
                                    i++;
                                    $preview.removeClass('weui-uploader__file_status');
                                    // 上传成功
                                    var server_id = $("input[name='server_id']");
                                    if (server_id.val() == '') {
                                        server_id.val(res.serverId);
                                    }  else {
                                        var str = server_id.val() + ',' + res.serverId; 
                                        server_id.val(str);
                                    }
                                    // 多张图片先判断还有没有要上传的
                                    if (i < length) {
                                        upload();
                                    }
                                }
                            });
                        }
                    });
                } else {
                    localData = localIds[i];
                
                    // 展示预览图  
                    var $preview = $('<li class="weui-uploader__file weui-uploader__file_status" style="background-image:url('+localData+')" imgurl = "'+localData+'"><div class="weui-uploader__file-content">0%</div></li>');  
                    $('#uploaderFiles1').append($preview);
                    $('.weui-uploader__file').click(function(){
                        var imgurl = $(this).attr('imgurl');
                                wx.previewImage({
                                    current: imgurl, // 当前显示图片的http链接
                                    urls: [imgurl] // 需要预览的图片http链接列表
                                });
                    });
                    // 上传动画
                    var progress = 0;
                    function uploading() {  
                        progress = progress + 3;
                        $preview.find('.weui-uploader__file-content').text(progress + '%');  
                        if (progress < 95 ) {  
                            setTimeout(uploading, 10);  
                        } 
                    }
                    uploading();//执行上传动画
                    wx.uploadImage({
                        localId: localData.toString(), // 需要上传的图片的本地ID，由chooseImage接口获得
                        isShowProgressTips: 0, // 默认为1，显示进度提示
                        success: function (res) {
                            i++;
                            $.toast("上传成功");
                            $preview.removeClass('weui-uploader__file_status');
                            // 上传成功把server_id拼接起来再控制器保存到本地
                            var server_id = $("input[name='server_id']");
                            if (server_id.val() == '') {
                                server_id.val(res.serverId);
                            }  else {
                                var str = server_id.val() + ',' + res.serverId; 
                                server_id.val(str);
                            }
                            // 多张图片先判断还有没有要上传的
                            if (i < length) {
                                upload();
                            }
                        }
                    });
                }
            }
        }
    });
});

看效果

微信图片_20171204184603.jpg
微信图片_20171204184612.jpg

未完待续---