layui 多文件上传 预览图 动态删除

最新推荐文章于 2024-05-27 17:05:30 发布
最新推荐文章于 2024-05-27 17:05:30 发布
阅读量2.4k 收藏 7
点赞数
文章标签： layui 
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liangdingguo/article/details/104134027
版权

源码

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head lang="en">
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../layui-v2.5.5/css/layui.css">
    <link rel="stylesheet" href="../css/public.css" media="all">
    <style type="text/css">
        .uploader-list {
            margin-left: -15px;
        }
        .uploader-list .info {
            position: relative;
            margin-top: -25px;
            background-color: black;
            color: white;
            filter: alpha(Opacity=80);
            -moz-opacity: 0.5;
            opacity: 0.5;
            width: 100px;
            height: 25px;
            text-align: center;
            display: none;
        }

        .uploader-list .handle {
            position: relative;
            background-color: black;
            color: white;
            filter: alpha(Opacity=80);
            -moz-opacity: 0.5;
            opacity: 0.5;
            width: 100px;
            text-align: right;
            height: 18px;
            margin-bottom: -18px;
            display: none;
        }
        .uploader-list .handle i {
            margin-right: 5px;
        }
        .uploader-list .handle i:hover {
            cursor: pointer;
        }
        .uploader-list .file-iteme {
            margin: 12px 0 0 15px;
            padding: 1px;
            float: left;
        }
    </style>
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">

        <fieldset class="table-search-fieldset">
            <legend>门店具体信息</legend>
            <div style="margin: 10px 10px 10px 10px">
                <form class="layui-form" action="">

                    <div class="layui-form-item">
                        <label class="layui-form-label">类型名字</label>
                        <div class="layui-input-block">
                            <input type="text" name="hotelName" required  lay-verify="required" placeholder="请输入门店名字" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">周一</label>
                        <div class="layui-input-inline">
                            <input name="username" class="layui-input" type="text" placeholder="请输入周一价格" autocomplete="off" lay-verify="required">
                        </div>
                        <label class="layui-form-label">周二</label>
                        <div class="layui-input-inline">
                            <input name="username" class="layui-input" type="text" placeholder="请输入周二价格" autocomplete="off" lay-verify="required">
                        </div>
                        <label class="layui-form-label">周三</label>
                        <div class="layui-input-inline">
                            <input name="username" class="layui-input" type="text" placeholder="请输入周三价格" autocomplete="off" lay-verify="required">
                        </div>
                        <label class="layui-form-label">周四</label>
                        <div class="layui-input-inline">
                            <input name="username" class="layui-input" type="text" placeholder="请输入周四价格" autocomplete="off" lay-verify="required">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">周五</label>
                        <div class="layui-input-inline">
                            <input name="username" class="layui-input" type="text" placeholder="请输入周五价格" autocomplete="off" lay-verify="required">
                        </div>
                        <label class="layui-form-label">周六</label>
                        <div class="layui-input-inline">
                            <input name="username" class="layui-input" type="text" placeholder="请输入周六价格" autocomplete="off" lay-verify="required">
                        </div>
                        <label class="layui-form-label">周天</label>
                        <div class="layui-input-inline">
                            <input name="username" class="layui-input" type="text" placeholder="请输入周天价格" autocomplete="off" lay-verify="required">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">设施</label>
                        <div class="layui-input-block">
                            <input name="WIFI" title="WIFI" type="checkbox">
                            <input name="KITCHEN" title="厨房" type="checkbox" checked="">
                            <input name="WASH_SUPPLIES" title="洗漱用品" type="checkbox">
                            <input name="CLOT" title="衣架" type="checkbox">
                            <input name="HAIR_DRIER" title="吹风机" type="checkbox" checked="">
                            <input name="WASH_MACHINE" title="洗衣机" type="checkbox">
                            <input name="IRON" title="熨斗" type="checkbox">
                            <input name="HEATING" title="暖气" type="checkbox" checked="">
                            <input name="DESK" title="书桌/工作区域" type="checkbox">
                            <input name="SMOKE_DETECTE" title="烟雾报警器" type="checkbox">
                            <input name="CARBON_MONOXIDE_ALARM" title="一氧化碳报警器" type="checkbox">
                        </div>
                    </div>


                    <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label">房间号码</label>
                        <div class="layui-input-block">
                            <textarea name="detailAddress"  required  lay-verify="required" placeholder="请输入内容" class="layui-textarea"></textarea>
                        </div>
                    </div>

                        <div class="layui-upload">
                            <button class="layui-btn" id="test2" type="button">上传房间图片</button>
                            <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                                预览图：
                                <div class="layui-upload-list uploader-list" style="overflow: auto;" id="uploader-list"></div>
                            </blockquote>
                        </div>

                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button  id="submitbtn" class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        </div>
                    </div>
                </form>


            </div>
        </fieldset>
    </div>
</div>
<script type="text/javascript" src="../js/jquery.min.js" charset="utf-8"></script>
<script type="text/javascript" src="../layui-v2.5.5/layui.js" charset="utf-8"></script>
<   <script>
    //省市区三联配置插件目录
    layui.config({
        //插件layarea.js 位于的路径
        base: '../js/'
        , version: '1.0'
    });
    //一般直接写在一个layarea.js文件中
    layui.use(['layer', 'form', 'layarea'], function () {
        var layer = layui.layer
            , form = layui.form
            , layarea = layui.layarea;

        layarea.render({
            elem: '#area-picker',
          /*  change: function (res) {
                //选择结果
                console.log(res);
            }*/
        });
    });
    //获取表单的数据
    layui.use('form', function(){
        var form = layui.form;
        //监听提交
        form.on('submit(formDemo)', function(datas){
            $.ajax({
                url:"/saveAddStore",
                data:JSON.stringify(datas.field),
                contentType:"application/json;charsetset=UTF-8",
                dataType:"json",
                type:"post",
                success:function(data){
                    console.log(data.msg);
                    layer.msg(data.msg);
                    window.parent.location.reload();
                    parent.layer.close(parent.layer.getFrameIndex(window.name));
                   //location.href("/tables"); //删除成功后再刷新
                },
                error:function(data){
                    console.log(data+'errr');
                    layer.msg('添加门店失败!');
                }
            });

            return false;

        });
    });


    layui.use('upload',function () {
        var $ = layui.jquery
            ,upload = layui.upload;
        //多图片上传
        upload.render({
            elem: '#test2'
            ,url: 'https://httpbin.org/post' //改成您自己的上传接口
            ,multiple: true
           /* ,bindAction:'#submitbtn'*/
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#uploader-list').append( '<div id="" class="file-iteme">' +
                                        '<div class="handle"><i class="layui-icon layui-icon-delete">删除</i></div>' +
                                        '<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img" style="width: 90px;height: 90px">'+
                                        '</div>'
                    )
                });
            }
            ,done: function(res){

                //上传完毕
            }
        });
    })

    $(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();

                       }

               });

    // 删除图片
           $(document).on("click", ".file-iteme .handle", function(event){

                    $(this).parent().remove();

                });

</script>

</body>
</html>

效果

 

javahouse的家
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
多图片上传页面（含动态预览及删除）
03-21
使用前引入jquery和layer.js，根据自己需求调整即可
使用layui实现多文件列表上传
12-28
该代码完整的实现了shiyonglayui技术实现多文件的上传预览和删除功能，下载下来直接导入到开发工具中就可以使用
layui多文件上传
最新发布
费马程序猿的博客
05-27 564
【代码】layui多文件上传。
SSM框架使用Layui文件上传插件实现多文件上传（多文件列表）
Xenoverse的博客
07-29 3281
SSM框架使用Layui文件上传插件实现多文件上传（多文件列表） pom.xml文件的配置 想要实现SSM框架实现多文件上传，必要的jar包必须要在pom.xml文件中引入。如下： <!--commons-fileupload --> <dependency> <groupId>commons-fi...
layui-图片上传，可使用选择图片->上传图片，预览图片，删除图片（转载）
叶落无痕的博客
09-18 2729
原文地址：https://gitee.com/AMortal/codes/qt8m6zk30u1g4evr95jhx13 &lt;!DOCTYPE html&gt; &lt;html&gt;   &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;layui&lt;/title&gt;
layui文件上传支持预览大图，
guzhizang的博客
04-03 315
【代码】layui文件上传支持预览大图，
layui多图上传实现删除功能的例子
10-16
在这个例子中，当图片上传成功后，会在uploader-list中动态插入一个新的图片元素，包含图片预览和删除按钮。同时，通过jQuery监听文件项的鼠标悬停事件，控制预览信息和删除按钮的显示与隐藏： ```javascript layui...
SpringBoot+layui实现文件上传功能
08-27
在本文中，我们将探讨如何利用Spring Boot框架与layui前端组件库来实现文件上传功能。Spring Boot简化了基于Spring的应用程序的构建和开发流程，通过自动配置各种组件，使得开发者能够快速搭建项目。而layui则是一个...
layui实现多图片上传并限制上传的图片数量
10-16
- `multiple`：开启多文件上传功能。 - `auto`：自动上传文件。 - `choose`：当用户选择文件时触发的回调函数。在这个回调中，我们检查当前选择的文件队列（`files`）长度，如果加上已有的教练图片数组（`...
django layui表单加图片上传功能（Django，layui）.zip
06-26
这个函数接收POST请求，处理文件上传，并保存到数据库。使用`request.FILES`获取上传的文件，然后创建并保存`ImageModel`实例。 ```python from django.shortcuts import render, redirect from .models import ...
Layui上传多张图片（多选+删除+预览），后台代码，oss上传
weixin_40362806的博客
02-23 2094
Layui上传多张图片带删除
SSM + Layui 多文件一次上传+预览+删除（避免文件乱序问题）
李晋江的博客
10-24 1317
SSM + Layui 多图片一次上传（避免文件乱序问题）SSM + Layui 多图片一次上传（避免文件乱序问题）1.Layui 文件上传（这里以图片为例）2.写一个测试 Demo3.调用 TinyMCE 组件渲染下该文本域4.效果演示5.源码地址 SSM + Layui 多图片一次上传（避免文件乱序问题） 1.Layui 文件上传（这里以图片为例） 2.写一个测试 Demo 代码结构树如下，extend 目录下加入我们刚下载的 tinymce 拓展组件 随便写一个 form 表单 <form
使用layui上传多文件
wgh0315的博客
08-04 1282
使用layui上传多文件 HTML部分 <div class="layui-form-item" > <label class="layui-form-label">上传多文件</label> <input type="hidden" id="carFullPicture" name="carFullPicture" style="margin-left: 35px;"/> <div class="la
layui文件单文件和多文件的上传、预览以及删除和修改
weixin_30765577的博客
11-08 1001
活不多说，直接上代码 单文件上传 1.HTML <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;"> <div id="uploadQRcode" class="layui-upload"> ...
layui 附件上传、预览、删除、下载
热门推荐
wan小小冰的博客
11-25 1万+
layui在开发文档中提供了 附件上传的方法upload.render(），此篇文章在此模块基础方法上扩展补充了附件预览、删除、下载的实现方法。具体如下： layui 文件/图片上传 layui 相册层 一、html <div class="layui-form-item"> <div class="layui-inline"> <label class="layui-form-label"><span class="font-colo
Layui多图片上传以及中止上传、删除预览等相关操作
qq_34252360的博客
02-12 2690
Layui多图片上传以及中止上传等相关操作完成品HTML代码upload.js要修改的代码，按Ctrl+Shift+F格式转换下，大概在139行将这段代码放到上面的大括号中Controller 完成品 上传前可删除图片，提交前将图片名称拼接 HTML代码 <div class="layui-form-item"> <label class="layui-form-la...
layui实现多图片上传以及视频上传，包括预览和删除功能
DEFT1998的博客
08-14 2962
layui实现多图片上传以及视频上传，包括预览和删除功能1.html代码2.js代码3.后台代码4.实现效果 1.html代码 <!--多图上传--> <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;"> <legend>上传图片</legend> </fieldset> <div class="layui-uplo
使用layui进行多图片上传，带预览和删除
UPCTO
06-02 1434
使用layui进行多图片上传，带预览和删除 = 不知道是不是移植到我系统才有这个情况，不过通过代码来看，应该是 ID没有更新的BUG ==这里，单张没有问题，但是多张就会出现之显示一张图片的情况，如下图。== 原文代码 ==
layui图片上传、预览、删除
能不能给个关注的博客
02-07 1192
layui图片上传、预览、删除、 <div class="layui-upload"> <button type="button" id="test2" class="layui-btn tj">多图片上传</button> <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;width: 88%">
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值