上传图片功能

工作日志  随手笔记 仅供参考

//用的jQuery WEUI 插件
<div class="weui-cells weui-cells_form">
    <div class="weui-cell">
        <div class="weui-cell__bd">
            <div class="weui-uploader">
                <div class="weui-uploader__bd">
                    <ul class="weui-uploader__files" id="uploaderFiles">
                        <!--<div class="img-item">-->
                        <!--<div class="imgWrapper" >-->
                        <!--<img src="../img/usedCannotDelete/add_img.png">-->
                        <!--</div>-->
                        <!--<div class="delete">-->
                        <!--<i class="iconfont icon-cross"></i>-->
                        <!--</div>-->
                        <!--</div>-->
                    </ul>
                    <div class="weui-uploader__input-box">
                        <div id="uploaderInput" class="weui-uploader__input">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

//删除图片重新上传
        $(document).on("click",".delete",function () {
            $(this).parents(".img-item").remove();

        })
        //图片上传功能
        $(document).on("click", '#uploaderInput  ', function () {
            //在调起上传图片功能之前需要查看当前图片数量
            var imgsLength = $(".img-item").length;//已上传的图片数量
            var count = 9-imgsLength;//需要再上传的图片数量
            if (imgsLength < 9){
                window.MBC.chooseImage({
                    count: count,
                    success: function (res) {
                        if (res.code == 1) {
                            // alert(JSON.stringify(res));
                            // alert(JSON.stringify(res.result));
                            // alert(JSON.stringify(res.result.serverId));
                            res.result.map(function (item, index) {
                                // var html = '<div class="imgWrapper" data-server-id="' + item.serverId + '"><img src="' + item.url + '"/></div>';
                                var html = '<div class="img-item">\n' +
                                    '<div class="imgWrapper" data-server-id="\' + item.serverId + \'">\n' +
                                    '<img src="' + item.url + '">\n' +
                                    '</div>\n' +
                                    '<div class="delete">\n' +
                                    '<i class="iconfont icon-cross"></i>\n' +
                                    '</div>\n' +
                                    '</div>';
                                $('#uploaderFiles').append(html);
                                var imgWrapper = $('.imgWrapper');
                                var width = window.screen.width;
                                var img_w = (width - 45) / 4;
                                var uploaderInput = $(".weui-uploader__input-box");
                                for (var i = 0; i < uploaderInput.length; i++) {
                                    $(uploaderInput[i]).css({"width": img_w + "px", "height": img_w + 'px'});
                                }
                                for (var i = 0; i < imgWrapper.length; i++) {
                                    $(imgWrapper[i]).css({"width": img_w + "px", "height": img_w + 'px'});
                                }
                                // $(".weui-uploader__input-box").css("display", "none")//隐藏上传图片功能图标
                            })
                        } else {
                            // $.alert({
                            //     title: '温馨提示',
                            //     text: res.result,
                            //     onOK: function () {
                            //         //点击确认
                            //     }
                            // });
                        }
                    }
                })
            }else {
                //当前图片数量已经是9张，无法再上传
                $.toast("图片数量已达上限","text");
            }

        });
//点击发布按钮遍历里面的图片
$(".imgWrapper").map(function () {
              goods_images.push($(this).data("server-id"));
            });
//将的到的id 传入后台参数里

.weui-uploader__bd {
    overflow: initial!important;
}
.img-item {
    position: relative;
    float: left;
}
.img-item .delete {
    position: absolute;
    left: -5px;
    top: -5px;
    width: 20px;
    height: 20px;
    background-color: #000;
    border-radius: 20px;
    display: flex;
    align-items: center;
    color: #fff;
    justify-content: center;
}
.imgWrapper{
    overflow: hidden;
    margin-bottom: 5px;
    margin-right: 5px;
}

.imgWrapper:nth-child(4n){
    margin-right: 0;
}
.imgWrapper img{
    display: block;
    width: 100%;
    height: auto;
}

大概思路就是点击上传照片按钮 判断上传照片的长度 如果大于9张就提示 图片数量达到上限