layui多张图片上传效果代码-html代码-BFW代码库

代码语言：html

所属分类：上传

代码描述：layui多张图片上传效果代码，可以选择多张图片，并且可删除

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>上传多图片页面</title>
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/js/layui/css/layui.css">
    <style>
        *{ margin: 0; padding: 0;}
        #formdata{max-width: 852px; margin:0 auto}

        .btn { border-radius: 0px; font-weight: 100; cursor: pointer; display: inline-block; padding: 5px; font-size: 14px;
            font-family: '微软雅黑' }

        .btn-primary { color: #fff; text-shadow: 0 1px rgba(0, 0, 0, .1);
            background-image: -webkit-linear-gradient(top, #4d90fe 0, #4787ed 100%);
            background-image: -o-linear-gradient(top, #4d90fe 0, #4787ed 100%);
            background-image: -webkit-gradient(linear, left top, left bottom, from(#4d90fe), to(#4787ed));
            background-image: linear-gradient(to bottom, #4d90fe 0, #4787ed 100%);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff4d90fe', endColorstr='#ff4787ed', GradientType=0);
            filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
            background-repeat: repeat-x;
            border: 1px solid #3079ed;
        }

        .btn-success { color: #fff; text-shadow: 0 1px rgba(0, 0, 0, .1);
            background-image: -webkit-linear-gradient(top, #35aa47 0, #35aa47 100%);
            background-image: -o-linear-gradient(top, #35aa47 0, #35aa47 100%);
            background-image: -webkit-gradient(linear, left top, left bottom, from(#35aa47),
            to(#35aa47));
            background-image: linear-gradient(to bottom, #35aa47 0, #35aa47 100%);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff35aa47',
            endColorstr='#ff35aa47', GradientType=0);
            filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
            background-repeat: repeat-x;
            border: 1px solid #359947;
        }

        .gallery .img-item { position: relative; cursor: pointer; }

        .gallery .img-item .delete { position: absolute; display: block; width: 20px; height: 20px;
            color: #fff; background: rgba(232, 0, 0, 0.7);  line-height: 20px; text-align: center;
            border-radius: 50%; top: 25px; right: 25px; cursor: pointer; }

        .img { width: 100px; height: 100px; margin: 20px; cursor: pointer;}

        .btn-upload{ margin: 20px; float: left; display: block; width: 100px; height: 100px;
            border: 1px solid #ddd; background: #ebebeb; line-height: 100px; font-size: 14px;
            text-align: center; color: #808080; cursor: pointer; }
        .box {
            width: 100%;
            height: 100%;
            background: #333;
            position: absolute;
            top:0px;
            left:0px;
            margin: 0 auto;
            align-items: center; /*定义body的元素垂直居中*/
            justify-content: center; /*定义body的里的元素水平居中*/
            display: none;
            overflow: hidden
        }
        .box img{
            width:100%;
            position: absolute;
        }
    </style>

</head>

<body>
    <form class="layui-form layui-form-pane" id="formdata" method="post" enctype="multipart/form-data">
        <!-- 上传图片模块 -->
        <div style="padding: 20px; font-size: 30px; ">上传图片</div>
        <!-- <form id="formdata" method="post" enctype="multipart/form-data"> -->
        <div class="gallery" id="gallery">
            <div class="img-item" style="display: inline-block;" id="first-btn-upload">
                <label for="btn-upload" class="btn-upload" id="btn-upload">点击上传</label>
                <div style="clear: both;"></div>
            </div>
        </div>
        <input id="file" type="file" multiple style="display: none">
        <!-- </form> -->
        <div class="box">
            <img src="" />
        </div>
        <button class="layui-btn" lay-submit lay-filter="uploadpic" style="display: none" id="uploadpic">上传</button>

        </div>
    </form>
    <button class="layui-btn" onclick="upload()">上传</button>
    <input type="file" id='p_image' accept="image/*" capture='camera' style="opacity: 0" />
    <img id="tempImage" src="" style="display:none;" />
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
    <!-- 你必须先引入jQuery1.8或以上版本 -->
    <!-- 必须先引入2.0.8版本的hammer.min.js -->
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/hammer.min.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/layui/layui.all.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/exif.min.js"></script>
    <script>
        // 保存证照执法
        function upload(){
            $("#uploadpic").click();
        }
    
        $(function  () {
            layui.use('form', function(){
                var form = layui.form;
                var layer = layui.layer;
                //监听提交
                form.on('submit(uploadpic)', function(data){
                    layui.use('jquery',function(){
                        var $=layui.$;
                        // 创建FormData根据form
                        var uploaddata = new FormData($("#formdata")[0]);
                        // 遍历图片数组把图片添加到FormData中
                        // var files = document.getElementById("file").files;
                        var maxsize = 0;
                        for (var i = 0; i < files.length; i++) {
                            uploaddata.append("file", files[i]);
                            maxsize = maxsize + files[i].size;
                        }
                        if(maxsize>52428800){
                            layer.msg('上传的文件总大小不能超过50MB，请重新上传！');
                            return;
          .........完整代码请登录后点击上方下载按钮下载查看