layui多图片上传,限制重复图片,限制数量

说明:layui本来多图片上传就可以限制上传重复图片,但是不会提示任何东西,可以利用

uploadListIns = upload.render({})

uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值,以免删除后出现同名文件不可选

后续只需要自己做重复判断提示即可

html

<label class="layui-form-label">图片上传</label>
<div class="layui-input-inline">
<button type="button" id="imgbtn" style="text-align: center;margin: 5px 0;" class="layui-btn ">上传图片</button>
    <input class="layui-hide" name="imggoods" id="imggoods" value="">
</div>

<div id="imgrigth" style="clear: both;overflow:auto;width:100%;text-align: center; ">
            <!-- <div style="float:left">
                <img src="upload/119111132118.jpg" class="rigthimg">
                <div><button type="button" class="layui-btn">删除该张</button></div>
            </div> -->

</div>

js

//监听删除等待上传图片
                $('#imgrigth').on('click','.delimg',function() {
                    $("#" + this.name).remove();
                    var imgi = uploadimg.indexOf(this.name);
                    delete uploadimg[imgi]; //删除对应的文件
                    var cp = new Array();
                    for (var i in uploadimg) {
                        cp.push(uploadimg[i]);
                    }
                    uploadimg = cp;
                    delete imgdatas[this.id]; //删除对应的文件
                    console.log(imgdatas);
                    $("#imgbtn").removeClass("layui-btn-disabled");
                    $("#imgbtn").attr("disabled", false);

                });


                upload.render({
                    elem: '#imgbtn',
                    url: '/uploadimages',
                    multiple: true,
                    acceptMime: 'image/*',
                    auto: false,
                    bindAction: '#addall',
                    choose: function(obj) {
                        //预读本地文件,如果是多文件,则会遍历。(不支持ie8/9)
                        obj.preview(function(index, file, result) {
                            var imgname = file.name.substr(0, file.name.lastIndexOf("."));
                            if (uploadimg.length == 0) {
                                uploadimg.push(imgname);
                                $("#imgrigth").append('<div id="' + imgname + '" style="float:left">' +
                                    '<img src="' + result + '" class="rigthimg">' +
                                    '<div><button type="button" name="' + imgname + '" id="'+index+'"  class="layui-btn delimg" ">删除该张</button></div>' +
                                    '</div>')
                            } else {
                                var upstart = true;
                                for (var j in uploadimg) {
                                    if (imgname == uploadimg[j]) {
                                        upstart = false;
                                    }
                                }

                                if (upstart) {
                                    imgdatas = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
                                    if (uploadimg.length < 4) {
                                        uploadimg.push(imgname);
                                        $("#imgrigth").append('<div id="' + imgname + '" style="float:left">' +
                                            '<img src="' + result + '" class="rigthimg">' +
                                            '<div><button type="button" name="' + imgname + '" id="'+index+'"    class="layui-btn delimg" ">删除该张</button></div>' +
                                            '</div>')
                                    }
                                    if (uploadimg.length == 4) {
                                        $("#imgbtn").addClass("layui-btn-disabled");
                                        $("#imgbtn").attr("disabled", true);
                                    }
                                } else {
                                    layer.msg('不能上传相同图片');
                                }
                            }

                        });

                    },
                    done: function(res) {
                        var item = this.item;
                        if (res.success) {
                            layer.msg('上传成功');
                            var imggoods = $("#imggoods").val();
                            $("#imggoods").val(imggoods + res.msg + ",")
                        } else {
                            layer.msg('上传失败');
                        }


                    },
                    allDone: function(obj) { //当文件全部被提交后,才触发
                        console.log("图片总数" + obj.total); //得到总文件数
                        console.log("上传成功数" + obj.successful); //请求成功的文件数
                        console.log("上传失败数" + obj.aborted); //请求失败的文件数

                        //图片上传之后再执行保存数据事件!!!!!!!
                        ordersave();
                    }
                });
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容