图片上传管理

已于 2023-02-17 10:45:42 修改
阅读量123 收藏
点赞数
文章标签： javascript jquery css
于 2023-02-17 10:43:51 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/TTyron/article/details/129080606
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入 layui.css -->
    <link rel="stylesheet" href="/static/lib/layui/css/layui.css">

    <!-- 引入 layui.js -->
    <script src="/static/lib/layui/layui.js"></script>
        <script src="/static/js/jquery.min.js"></script>
        <style>
            .layui-upload-drag-self {
                background-color: #fbfdff;
                border: 1px dashed #c0ccda;
                border-radius: 6px;
                box-sizing: border-box;
                width: 148px;
                height: 148px;
                line-height: 148px;
                vertical-align: top;
                display: inline-block;
                text-align: center;
                cursor: pointer;
                outline: 0;
                margin-right: 13px;
                float: left;
            }

            .layui-input-inlines-self {
                position: relative;
                margin-left: 90px;
                min-height: 36px;
                text-align: left;
            }

            .layui-upload-drag-self .layui-icon {
                font-size: 28px;
                color: #8c939d
            }
            .layui-upload-drag-self .img {
                position:relative;
                height: 148px;
                width: 148px;
            }

            .img-more .layui-icon {
                font-size: 28px;
                color: #8c939d
            }
            .img-more .img {
                position:relative;
                height: 148px;
                width: 148px;
            }

            .layui-upload-img {
                width: 148px;
                height: 148px;
                border-radius: 6px;
                margin-top: -3px;
                margin-left: -2px;
            }


            .handle {
                position: absolute;
                width: 148px;
                height: 100%;
                z-index: 100;
                border-radius: 6px;
                top: 0;
                background: rgba(59, 60, 61, 0.6);
                text-align: center;
            }

            .handle .icon-myself {
                z-index: 999;
                transition: all .3s;
                cursor: pointer;
                font-size: 25px;
                width: 25px;
                color: rgba(255, 255, 255, 0.91);
                margin: 0 4px;
            }



        </style>
</head>
<body>
<div class="layui-col-md12 layui-col-sm6 layui-col-xs12">
    <div class="">
        <div class="layui-card-body">
            <form class="layui-form layui-table-form" style="text-align: center" action="" lay-filter="cfg-form">
                <div class="layui-form-item">
                    <label class="layui-form-label">上传图片：</label>
                    <button type="button" id="importModel" class="layui-hide">图片导入</button>
                    <div class="layui-input-inlines-self" id="imgItemInfo-A">
                        <div class="layui-upload-drag-self" id="importImg-A-0">
                            <div id="imgDivs-A-0">
                                <i class="layui-icon" id="uploadIcon-A-0">&#xe654;</i>
                            </div>
                            <div class="img layui-hide" id="uploadDemoView-A-0">
                                <img class="layui-upload-img" id="imgs-A-0" src="">
                                <div class="handle layui-hide" id="handle-A-0">
                                    <i class="layui-icon icon-myself" id="preImg-A-0">&#xe622;</i>
                                    <i class="layui-icon icon-myself" id="delImg-A-0">&#x1007;</i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <button type="button" class="layui-btn layui-btn-normal layui-btn-sm layui-hide" id="btn-more-A" data-type="submit">
                            更多图片
                        </button>
                        <div class="site-demo-flow layui-hide img-more" id="more-A">
                        </div>
                    </div>
                </div>

                <div class="layui-form-item" id="button-group">
                    <div class="layui-inline">
                        <button type="button" class="layui-btn layui-btn-normal layui-btn-sm" id="getUrls"
                                lay-submit=""
                                lay-filter="getUrls-form-submit" data-type="submit">获取图片url的值
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<div class="layui-col-md12 layui-col-sm6 layui-col-xs12">
    <div class="layui-card">
        <div class="layui-card-body">
            <form class="layui-form layui-table-form" style="text-align: center" action="" lay-filter="cfg-form">
                <div class="layui-form-item">
                    <label class="layui-form-label">上传图片：</label>
<!--                    <button type="button" id="importModel" class="layui-hide">图片导入</button>-->
                    <div class="layui-input-inlines-self" id="imgItemInfo-B">
                        <div class="layui-upload-drag-self" id="importImg-B-0">
                            <div id="imgDivs-B-0">
                                <i class="layui-icon" id="uploadIcon-B-0">&#xe654;</i>
                            </div>
                            <div class="img layui-hide" id="uploadDemoView-B-0">
                                <img class="layui-upload-img" id="imgs-B-0" src="">
                                <div class="handle layui-hide" id="handle-B-0">
                                    <i class="layui-icon icon-myself" id="preImg-B-0">&#xe622;</i>
                                    <i class="layui-icon icon-myself" id="delImg-B-0">&#x1007;</i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <button type="button" class="layui-btn layui-btn-normal layui-btn-sm layui-hide" id="btn-more-B" data-type="submit">
                            更多图片
                        </button>
                        <div class="site-demo-flow layui-hide img-more" id="more-B">
                        </div>
                    </div>
                </div>

<!--                <div class="layui-form-item" id="button-group">-->
<!--                    <div class="layui-inline">-->
<!--                        <button type="button" class="layui-btn layui-btn-normal layui-btn-sm" id="getUrls"-->
<!--                                lay-submit=""-->
<!--                                lay-filter="getUrls-form-submit" data-type="submit">获取图片url的值-->
<!--                        </button>-->
<!--                    </div>-->
<!--                </div>-->
            </form>
        </div>
    </div>
</div>
<div class="layui-col-md12 layui-col-sm6 layui-col-xs12">
    <div class="layui-card">
        <div class="layui-card-body">
            <form class="layui-form layui-table-form" style="text-align: center" action="" lay-filter="cfg-form">
                <div class="layui-form-item">
                    <label class="layui-form-label">上传图片：</label>
                    <!-- <button type="button" id="importModel" class="layui-hide">图片导入</button>-->
                    <div class="layui-input-inlines-self" id="imgItemInfo-C">
                        <div class="layui-upload-drag-self" id="importImg-C-0">
                            <div id="imgDivs-C-0">
                                <i class="layui-icon" id="uploadIcon-C-0">&#xe654;</i>
                            </div>
                            <div class="img layui-hide" id="uploadDemoView-C-0">
                                <img class="layui-upload-img" id="imgs-C-0" src="">
                                <div class="handle layui-hide" id="handle-C-0">
                                    <i class="layui-icon icon-myself" id="preImg-C-0">&#xe622;</i>
                                    <i class="layui-icon icon-myself" id="delImg-C-0">&#x1007;</i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <button type="button" class="layui-btn layui-btn-normal layui-btn-sm layui-hide" id="btn-more-C" data-type="submit">
                            更多图片
                        </button>
                        <div class="site-demo-flow layui-hide img-more" id="more-C">
                        </div>
                    </div>
                </div>

                <!--                <div class="layui-form-item" id="button-group">-->
                <!--                    <div class="layui-inline">-->
                <!--                        <button type="button" class="layui-btn layui-btn-normal layui-btn-sm" id="getUrls"-->
                <!--                                lay-submit=""-->
                <!--                                lay-filter="getUrls-form-submit" data-type="submit">获取图片url的值-->
                <!--                        </button>-->
                <!--                    </div>-->
                <!--                </div>-->
            </form>
        </div>
    </div>
</div>

</body>
<script>
    layui.use(['form', 'layer',  'upload'], function () {
        var $ = layui.jquery,
            layer = layui.layer,
            form = layui.form,
            upload = layui.upload,

            imgsId,
            uploadDemoViewId,
            uploadIconId,
            importImg,
            imgItemInfo,
            photo_type,
            count = 1;
        //查看更多
        $(document).on('click', '[id^=btn-more]', function () {
            let more = $(this).next().attr('id')
            layer.open({
                type: 1,
                skin: 'ayui-layer-nobg',
                maxHeight: 960,
                title: false,
                shadeClose: true, //开启遮罩关闭
                content: $('#' + more),
                area:['900px','500px'],
                success: function () {
                    $('#' + more).removeClass('layui-hide')
                }
            });
        })
        //删除图片
        $(document).on('click', '[id^=delImg]', function () {
            //判断哪一行的照片上传
            photo_type = ($(this).attr('id')).split('-')
            photo_type = photo_type[1]

            var importImgF = $('#imgItemInfo-'+ photo_type).find('div:first');
            var empt = $(this).parent().parent().parent();
            var nextImgSrc = $(this).parent().parent().parent().next().find('img').attr('src');
            //判断当前DIV后面的div的url是否为空
            if (!nextImgSrc) {
                //判断是否为第一个
                if (importImgF.attr('id') === empt.attr('id')) {
                    //-是 ，清空第一个 最后面的删除
                    //图片url清空
                    empt.find('img').attr('src','');
                    $(this).parent().parent().addClass('layui-hide');
                    importImgF.find('i:first').removeClass('layui-hide');
                    count--;
                    $('#importImg-'+ photo_type + '-' + count).remove();
                } else {
                    // -否，删除当前
                    empt.remove();
                }
            } else {
                //如果有值删除当前div
                empt.remove();
            }
            let more_length = $('#more-'+ photo_type).children().length
            if (more_length != 0){
                if ($('#imgItemInfo-'+ photo_type).children().length < 7){
                    let first = $('#more-'+ photo_type).find('div:first')
                    $('#imgItemInfo-'+ photo_type).children().eq(-2).after(first.prop('outerHTML'))
                    first.remove()
                }
            }else{
                $('#btn-more-'+ photo_type).addClass('layui-hide')
            }

            return false;
        });

        //图片预览
        $(document).on('click', '[id^=preImg]', function () {
            var iHtml = "<img src='" + $(this).parent().parent().find('img:first').attr('src') + "' style='width: 100%; height: 100%;'/>";
            layer.open({
                type: 1,
                shade: false,
                title: false, //不显示标题
                area: ['40%', '60%'],
                content: iHtml //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
            });
            return false;
        });

        //图片绑定鼠标悬浮
        $(document).on("mouseenter", ".img", function () {
            //鼠标悬浮
            $(this).find('div:first').removeClass('layui-hide');
        }).on("mouseleave", ".img", function () {
            //鼠标离开
            $(this).find('div:first').addClass('layui-hide');
        });

        $(document).on('click', '[id^=imgDivs]', function () {
            //判断哪一行的照片上传
            photo_type = ($(this).attr('id')).split('-')
            photo_type = photo_type[1]
            //给id赋值
            uploadIconId = $(this).find('i').attr('id');
            uploadDemoViewId = $(this).next().attr('id');
            imgsId = $(this).next().find('img').attr('id');
            importImg = $(this).parent().eq(0).attr('id');
            imgItemInfo = $(this).parent().parent().eq(0).attr('id');
            $('#importModel').click();
        });

        upload.render({
            elem: '#importModel'
            , multiple: true
            , url: '/index/index/upload' //改成您自己的上传接口
            , data:{
                'a_id': 'DX20200227001'
            }
            , done: function (res) {
                if (res.code !== 2000) {
                    return layer.msg('上传失败')
                }
                $('#' + imgsId).attr('src', res.data.file_path);
                $('#' + uploadDemoViewId).removeClass('layui-hide');
                $('#' + uploadIconId).addClass('layui-hide');
                let length = $('#imgItemInfo-'+photo_type).children().length
                console.log(length)
                if (length > 6){
                    let temp_num = imgsId.split('-')
                    temp_num = temp_num[2]
                    let temp = $('#importImg-'+ photo_type + '-' + temp_num)
                    $('#more-'+ photo_type).append(temp.prop('outerHTML'))
                    temp.remove()
                    $('#btn-more-'+ photo_type).removeClass('layui-hide')
                }

                $('#imgItemInfo-'+ photo_type).append(
                    '<div class="layui-upload-drag-self" id="importImg-'+ photo_type + '-' + count + '">' +
                    '<div id="imgDivs-'+ photo_type + '-' + count + '">' +
                    '<i class="layui-icon" id="uploadIcon-'+ photo_type + '-' + count + '"> &#xe654; </i>' +
                    '</div>' +
                    '<div class="img layui-hide" id="uploadDemoView-'+ photo_type + '-' + count + '">' +
                    '<img class="layui-upload-img" id="imgs-'+ photo_type + '-' + count + '" src="">' +
                    '<div class="handle layui-hide" id="handle-'+ photo_type + '-' + count + '">' +
                    '<i class="layui-icon icon-myself" id="preImg-'+ photo_type + '-' + count + '">&#xe622;</i>' +
                    '<i class="layui-icon icon-myself" id="delImg-'+ photo_type + '-' + count + '">&#x1007;</i>' +
                    '</div>' + '</div>' + '</div>'
                );
                count++;
            }
        });

        form.on('submit(getUrls-form-submit)', function (data) {
            //使用data.field获取不到值
            var imgs = $('[id^=imgs]');
            var imgArray=[];
            imgs.each(function () {
                var url=$(this).attr('src');
                //滤空
                if (url){
                    imgArray.push(url);
                }
            });
            alert(JSON.stringify(imgArray));
            return false;
        });
    });
</script>
</html>

在这里插入图片描述

xxxibgdron_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
很好用的图片上传管理源码ASP
12-10
【标题】"很好用的图片上传管理源码ASP"揭示了这是一个基于ASP（Active Server Pages）编程语言的图片管理系统源代码。ASP是一种微软开发的服务器端脚本环境，用于生成动态网页内容。这个源码的核心功能是图片上传和...
动易内容管理系统Word图片上传
06-23
在“动易内容管理系统Word图片上传”功能中，系统允许用户直接从Microsoft Word文档中选择并上传图片到网站，极大地提升了编辑效率和用户体验。 该功能的核心在于实现了Word与网站之间的无缝集成。用户可以在Word...
【工具】vue 图片上传(单张/多张)
代码随想录
08-18 2199
本文单传组件取自若依微服务为版ruoyi-ui：http://doc.ruoyi.vip/ruoyi-cloud/ 环境： vue@2.6.12 element-ui@2.15.3 1.图片上传(单张) 组件： //components/ImageUpload <template> <div class="component-upload-image"> <el-upload accept=".png,.jpg,.jpeg" ..
tinyMCE中图片的自定义上传
热门推荐
ouxiaoyang5的专栏
07-31 1万+
tinyMCE图片拖动到编辑框或者使用图片上传插件插入到编辑框时，需要指定上传方法，现需要使用后台接收前台上传的图片并将图片保存到服务器，之后将图片的url返回到前台做图片链接。 tinyMCE中有两种方式： 1、直接使用images_upload_url属性，该属性会在上传图片时自动访问指定的url并获取返回地址： images_upload_url: '/image/upload', ...
若依管理后台多图片上传组件
wgh0315的博客
04-19 6767
组件路径 组件 index.vue 详情 <template> <div class="component-upload-image"> <el-upload :action="uploadImgUrl" list-type="picture-card" :on-success="handleUploadSuccess" :before-upload="handleBeforeUpload" :on-er
C#sql2005图片上传管理
03-20
在IT行业中，图片上传管理是Web应用程序开发中的一个常见需求，尤其在内容管理系统、电子商务平台或者社交媒体应用中。本主题将深入探讨如何使用C#语言和SQL Server 2005来实现这一功能。 首先，我们需要理解C#作为...
简单图片管理，图片上传
06-04
"简单图片管理，图片上传"这个主题涉及到的主要知识点包括文件操作、图片处理和网络传输等技术。下面将详细阐述这些方面： 1. **文件操作**： - **创建文件夹**：在编程中，我们通常会使用特定的库或API来创建...
图片管理系统带批量上传
11-18
【图片管理系统带批量上传】是一种专门用于管理和处理图像文件的应用程序，它提供了高效、便捷的图片上传、存储、检索和管理功能。在当前数字化时代，图片数据量日益庞大，一个良好的图片管理系统对于个人用户和企业...
【React 】开发环境搭建详细指南
lph159的博客
07-24 880
无论你是刚刚开始学习 React，还是希望在现有项目中采用 React 技术，搭建一个高效的开发环境都是至关重要的。本文将详细介绍如何从零开始搭建 React 开发环境，涵盖所需的工具和最佳实践，帮助你快速启动并顺利进行开发。Visual Studio Code（VS Code）是目前最流行的代码编辑器之一，提供了丰富的扩展和强大的功能。如果你希望对项目的配置有更多的控制，可以选择手动配置 React 项目。下载并安装最新版本的 Node.js，安装 Node.js 后，npm 会自动安装。
在Vue程序中，如何检测用户的登录状态并跳转到对应页面
exlink2012的专栏
07-25 201
通过以上步骤，你可以在Vue应用程序中检测用户的登录状态，并在用户尝试访问受保护页面时跳转到登录页面。同时，在用户登录和登出后，你可以根据需要跳转到相应的页面。
VUE中的重点*
qq_61132537的博客
07-22 916
实际上就是一个闭包，因为vue是单页面应用，是由很多组件构成，每一个组件中都有一个data， 所以通过闭包给每一个组件创建了一个私有的作用域，这样就不会相互影响。
vue如何解决跨域？
FENGZXCjjjjj的博客
07-21 516
在Vue.js项目中，当你的前端应用尝试从与自身不同源的服务器（协议、域名、端口中的任一不同）加载资源时，可能会遇到跨域（CORS, Cross-Origin Resource Sharing）问题。
thinkphp8结合layui2.9 图片上传验证
quweiie的专栏
07-21 335
thinkphp8图片上传的验证
Vue3可媲美Element Plus Tree组件实战之移除节点
felix_alone2012的博客
07-25 478
《Element Plus Tree - 自定义节点内容》示例中介绍了移除节点的用法，个人觉得作为提供给用户API，应该遵循迪米特法则，把功能实现的细节封装在组件内部，而提供给用户最简单的操作方式，同时在此基础上支持用户的扩展。因此，在API使用的人性化方便，个人觉得element plus做的并不优秀。为此，我们自定义tree组件时对用户API可以设计的更人性化些。
Angular由一个bug说起之八：实践中遇到的一个数据颗粒度的问题
KenkoTech的博客
07-24 365
之所以使用这种比较直接的方式是因为项目中的数据类型已经确定，而且对数字的处理逻辑没有统一在一个文件中。这是大型项目经常遇到的问题，起到相同作用的代码因为一些小的差别而分别写在管理各自功能的文件里。文件存入数据库，这样我们就可以统一维护一个表，不管是前端来处理数据还是后端来处理都能遵守相同的规则。针对这篇文章提到的数字缩写的问题，可以有两种处理方案。来展示数据的功能，这些数据根据不同的类型和单位会为其加上前缀、后缀或者省略小数。
爬虫基本原理入门
RHeng的博客
07-25 626
爬虫（Web Crawler），又称为网络爬虫或网页蜘蛛，是一种按照一定的规则，自动地抓取万维网信息的程序或者脚本。它们可以模拟浏览器行为，遍历网页并抓取网页中的信息，如文本、图片、链接等。接下来，我们会尝试使用Python等编程语言，结合相关库和工具，动手编写自己的爬虫程序，探索更多关于爬虫技术的奥秘。
typescript中type和interface有什么区别，如何选择？
闻人放歌的三寸青草园圃
07-23 120
【代码】typescript中type和interface有什么区别，如何选择？
vue3响应式转换常用API
最新发布
fyw1789的博客
07-25 160
这个 API 实际上是一个语法糖： val = isRef(val)?unRef: 如果参数给的是一个 ref 值，那么就返回内部的值，如果不是 ref，那么就返回参数本身。toRefs：将一个响应式对象转为一个普通对象，普通对象的每一个属性对应的是一个 ref 值。接收一个对象（不论是响应式的还是普通的）或者一个 ref，返回一个原来值的只读代理。toRef：基于响应式对象的某一个属性，将其转换为 ref 值。这个 API 和前面介绍的 unref 比较相似。
牛客JS题（二）直角三角形
不起眼小菜菜的博客
07-25 161
注释很详细，直接上代码……
后台管理系统图片上传失败
05-02
后台管理系统图片上传失败可能有多种原因。以下是一些常见的可能原因和解决方法： 1. 文件大小限制：后台管理系统可能设置了文件大小的限制，如果上传的图片大小超过了限制，就会导致上传失败。解决方法是检查后台...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值