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

最新推荐文章于 2024-02-02 17:26:04 发布
原创最新推荐文章于 2024-02-02 17:26:04 发布 · 2.5k 阅读
7 ·
CC 4.0 BY-SA版权
文章标签：
#layui
本文展示了一个基于layui框架的门店信息录入界面，包括门店名称、周内价格、设施选项及房间号输入，并实现了多图片上传功能，适用于酒店或民宿等场景的管理。
源码
<!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>
效果