layui多图片上传并限制上传的图片数量

最新推荐文章于 2025-06-24 13:40:31 发布

原创最新推荐文章于 2025-06-24 13:40:31 发布 · 8.3k 阅读

3 ·

CC 4.0 BY-SA版权

JavaScript 同时被 2 个专栏收录

27 篇文章

订阅专栏

框架

7 篇文章

订阅专栏

本文详细介绍了如何使用JavaScript和jQuery实现多图片上传和删除功能，包括限制上传图片的数量、预览图片、处理图片大小及格式，以及在上传后如何进行图片数据的管理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

        //给图片添加删除
        function mouseChange() {
                $(document).on("mouseenter mouseleave", ".file-iteme", function (event) {
                    if (event.type === "mouseenter") {
                        //鼠标悬浮
                        $(this).children(".info").fadeIn("fast");
                        $(this).children(".handle").fadeIn("fast");
                    } else if (event.type === "mouseleave") {
                        //鼠标离开
                        $(this).children(".info").hide();
                        $(this).children(".handle").hide();
                    }
                });

        }
        mouseChange();

    //json的length  
    function getJsonLength(jsonData){
            var jsonLength = 0;
            for(var item in jsonData){
                jsonLength++;
            }
            return jsonLength;
        }

        //多图片上传
        var ImgList = $('#uploader-list'),uploadListIns =upload.render({
            elem: '#chooseImg',
            url: $("#projectUrl").val()+ '/img/imgUpload.do',
            accept: 'images',
            acceptMime: 'image/jpg,image/png,image/jpeg',
            exts: 'jpg|png|jpeg',
            size: 1024,
            multiple: true,
            auto: true,
            choose: function(obj){
                var files = obj.pushFile(); //将每次选择的文件追加到文件队列
                var len = getJsonLength(files);
                //读取本地文件
                obj.preview(function (index, file, result) {
                    if (parseInt(len)+parseInt(coachPicsArray.length)-count > 6){
                        layer.msg("门店图片不能超过6张");
                        //遍历
                        $.each(files,function(_key){
                            var key = _key;
                            var value = files[_key];
                            if(_key == index)
                            {  //删除
                                delete files[_key];
                            }
                        });
                    }else {
                        var reader = new FileReader();
                        reader.onload = function (e) {
                            var image = new Image();
                            image.onload = function () {
                                var realWidth = image.width;
                                var realHeight = image.height;
                                var tr = $(['<div id="upload-' + index + '" class="file-iteme">' +
                                '<div class="removeIcon handle"> <i class="layui-icon" style="color: white ;margin-right: 40%">&#xe640;</i></div>' +
                                '<img  style="color: white;width: 120px" "showBig(this)" src=' + result + ' id="img-' + index + '">' +
                                '</div>'].join(''));

                                //删除
                                tr.find('.handle').on('click', function () {
                                    $(this).parent().remove();
                                    delete files[index]; //删除对应的文件
                                    var value = $("#clubCoachPics").val().split(",");
                                    var arr = [];
                                    for( var i in value){
                                        if (value[i] != $(this).next().data('value')){
                                            arr.push(value[i]);
                                        }
                                    }
                                    $("#clubCoachPics").val(arr.join(",")) ;

                                });
                                ImgList.append(tr);

                            };
                            image.src = result;
                        };
                        //正式读取文件
                        reader.readAsDataURL(file);
                    }
                });
            },
            before: function (obj) {
                layer.msg('图片上传中...', {
                    icon: 16,
                    shade: 0.01,
                    time: 3000
                })
            },
            done: function (res, index, upload) {
                $("#img-"+ index + "").attr("data-value",res.imgUrl);
                if(res.code == 0){ //上传成功
                    var imgUrl = $("#clubCoachPics").val();
                    if(imgUrl==null||imgUrl==""){
                        $("#clubCoachPics").val(res.imgUrl);
                    }else{
                        $("#clubCoachPics").val(imgUrl+","+res.imgUrl);
                    }
                    delete files[index]; //删除文件队列已经上传成功的文件
                    return;
                };

            }
        });

之前的代码时最初的版本，在公司原有的代码基础上修改的，时间久远，很多参数我也忘记了，更新一下后来的版本。

        //给图片添加删除
        function mouseChange() {
                $(document).on("mouseenter mouseleave", ".file-iteme", function (event) {
                    if (event.type === "mouseenter") {
                        //鼠标悬浮
                        $(this).children(".info").fadeIn("fast");
                        $(this).children(".handle").fadeIn("fast");
                    } else if (event.type === "mouseleave") {
                        //鼠标离开
                        $(this).children(".info").hide();
                        $(this).children(".handle").hide();
                    }
                });

        }
        mouseChange();

        //图片删除事件
        $(document).on("click", ".file-iteme .handle", function(event){
            var currentImgUrl = $(this).next().data('value');
            var values = $("#clubCoachPics").val().split(",");
            var imageIndex = $(this).next().attr('index');
            var that = $(this);
            layer.confirm('您确定要删除这张图片么？', {
                btn: ['确认','不要'] //按钮
            }, function(index){
                $.ajax({
                    type:"post",
                    url:$("#projectUrl").val()+"/clubInfo/deleteClubCoachPics.do",
                    data:"id="+$("#id").val()+"&str="+currentImgUrl,
                    success:function(res){
                        if(res.code==0){
                            var arr = [];
                            for( var i in values){
                                if (values[i] != currentImgUrl){
                                    arr.push(values[i]);
                                }
                            }
                            $("#clubCoachPics").val(arr.join(",")) ;
                            if(imageIndex != null && imageIndex != ''){
                                delete files[imageIndex]; //删除对应的文件
                            }
                            that.parent().remove();
                            layer.close(index);
                            layer.msg('删除成功');
                        }else{
                            layer.msg(res.msg);
                        }
                    }
                })
            })
        });


        var index;
        //多图片上传
        var ImgList = $('#uploader-list'),uploadListIns =upload.render({
            elem: '#chooseImg',
            url: $("#projectUrl").val()+ '/img/imgUpload.do',
            accept: 'images',
            acceptMime: 'image/jpg,image/png,image/jpeg',
            exts: 'jpg|png|jpeg',
            size: 1024,
            multiple: true,
            auto: true,
            number:6,
            before: function(obj){
                files = obj.pushFile(); //将每次选择的文件追加到文件队列
                var fileLength = Object.keys(files).length;
                var early = $("#clubCoachPics").val();
                if (early == ""|| early == null){
                    early = 0;
                }else {
                    early =early .split(",").length
                }
                var imgLength = early + fileLength;
                if(imgLength > 6) {
                    layer.msg('上传图片数量不能超过6张', {
                        icon: 2,
                        time: 1500
                    });
                    //遍历
                    obj.preview(function (index, file, result) {
                        $.each(files, function (_key) {
                            var key = _key;
                            var value = files[_key];
                            if (_key == index) {  //删除
                                delete files[_key];
                            }
                        });
                    });
                    return false;
                }else{
                    index = layer.msg('正在上传，请稍候', {
                        icon: 16,
                        shade: 0.01,
                        time: 150000*10
                    });
                    //读取本地文件
                    obj.preview(function (index, file, result) {
                        var reader = new FileReader();
                        reader.onload = function (e) {
                            var image = new Image();
                            image.onload = function () {
                                var realWidth = image.width;
                                var realHeight = image.height;
                                var tr = $(['<div id="upload-' + index + '" class="file-iteme imgSrc">' +
                                '<div class="removeIcon handle"> <i class="layui-icon" style="color: white">&#xe640;</i></div>' +
                                '<img style="color: white;width: 100px" "showBig(this)" src=' + result + ' id="img-' + index + '" index="' + index + '">' +
                                '</div>'].join(''));
                                ImgList.append(tr);
                            };
                            image.src = result;
                        };
                        //正式读取文件
                        reader.readAsDataURL(file);
                    });
                }
            },
            done: function (res, index, upload) {
                $("#img-"+ index + "").attr("data-value",res.imgUrl);
                if(res.code == 0){ //上传成功
                    layer.msg("上传成功",{
                        id:1
                    });
                    var imgUrl = $("#clubCoachPics").val();
                    if(imgUrl==null||imgUrl==""){
                        $("#clubCoachPics").val(res.imgUrl);
                    }else{
                        $("#clubCoachPics").val(imgUrl+","+res.imgUrl);
                    }
                }else{
                    $('#upload-'+ index).remove();
                    layer.msg('上传失败，请重新上传');
                }
                delete files[index]; //删除文件队列已经上传成功的文件
                return;
            },
            error: function(index, upload){
                $('#upload-'+ index).remove();
                delete files[index];
                layer.msg('上传失败，请重新上传');
            }
        });