微信h5之多图片上传 踩坑指南

前些日子接到一个需求 要在微信h5 做一个多图片上传的功能;我寻思这还不简单么;

百度的多图上传拿过来,结果 不好使.............................(ios可以,安卓只能每次选一张)

那继续直接换weui , 结果还是不好使............................(ios可以,安卓只能每次选一张)

但是确实有人实现了这个功能 !!!

后来修改了下 思路 用微信官方的  拍照上传功能

<input type="hidden" id="img_str" name="img_str">
            <a id="upload_button" href="javascript:void(0);" class="uploadImage uploadbtn"><img src="upload.png" alt="" style="height:100px;width:100px;float: left;margin-left: 10%;margin-bottom: 30px"></a>

 

 <div style="text-align: center;margin-top: 20px;margin-bottom: 100px"> <input class="btn btn-default"  type="submit" name="submit" value="确认提交"></div>   提交时传递的是serverId  然后后端 根据端口去获取素材 上传那图片   

 

获取素材的 url 微擎版本为 

       $media_id = $serid;//提交过来的serverId即$media_id
        $account_api = WeAccount::create();
        $result = $account_api->downloadMedia($media_id);

 

 

 

下边是jq的处理 上传素材以及删除

<script>

    wx.config({
        debug: false,
        appId: "<?php echo $jssdk['appId'] ?>",
        timestamp: "<?php echo $jssdk['timestamp'];?>",
        nonceStr: "<?php echo $jssdk['nonceStr'];?>",
        signature: "<?php echo $jssdk['signature'];?>",
        jsApiList: [
            'onMenuShareTimeline',
            'onMenuShareAppMessage',
            'chooseImage',
            'uploadImage',
            'downloadImage'
        ]
    });
    wx.ready(function () {
        $('.uploadImage').on('click', function () {
            wx.chooseImage({
                success: function (res) {
                    var localIds = res.localIds;
                    syncUpload(localIds);
                }
            });
        });
        var syncUpload = function(localIds){
            var localId = localIds.pop();
            wx.uploadImage({
                localId: localId,
                isShowProgressTips: 1,
                success: function (res) {
                    var serverId = res.serverId; // 返回图片的服务器端ID
                    var str = $('#img_str').val()+serverId+',';
                    // $('.imglist').append("<li><img  οnclick='aaa(this.id)' id='"+serverId+"'src='"+localId+"'  /></li>");
                       $('.imglist').append("<li><img  src='"+localId+"' style='position: absolute;'  /> <img src='http://sign.endclass.cn/addons/card_recover/template/mobile/static/del.png' οnclick='aaa(this.id)' id='"+serverId+"' style='height:20px;width:20px;position: relative;top: 0px;left: 25px'></li>");
                   
                    $('#img_str').val(str);
                    //其他对serverId做处理的代码
                    if(localIds.length > 0){
                        syncUpload(localIds);
                    }
                    if($('.imglist img').size() >= 18) {
                        $("#upload_button").hide();
                    }
                },
                fail: function (res) { alert(JSON.stringify(res)); }
            });
        };

    })

</script>

<script>

    $("#sb").click(function(){
        var imglist = $(".imglist").html();

        if(imglist == "" || imglist == null) {
            alert("请添加图片");
            return false;
        } else {
            if($(".imglist").find('img').size() >9) {
                alert("图片只允许上传9张！");
                return false;
            }
            var img_str = $('#img_str').val();
        }

//         alert(img_str);
//         $.post("http://sign.endclass.cn/app/index.php?i=3&c=entry&do=Getmedia&m=card_recover", {img_str:img_str},function(data){
// //            window.location.href = "__URL__/test";
//             alert(data);
//         });

    });

    function aaa(value) {

        console.log(value);

        $("#"+value).parent().css("display", "none");

            var img_str = $('#img_str').val();
            img_str=img_str.replace(value+",","");

            $("#img_str").val(img_str);

            $("#upload_button").css("display", "block");

      
    }

</script>