src/main/resources/templates/test/test3.html

这里只显示每个文件的开头 60 行。登录后可以解锁完整代码。

微信扫码关注公众号，代码整理好后第一时间通知你。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>showImages</title>
    <style>
        .float{
            float:left;
            width : 200px;
            height: 200px;
            overflow: hidden;
            border: 1px solid #CCCCCC;
            border-radius: 10px;
            padding: 5px;
            margin: 5px;
        }
        img{
            position: relative;
        }
        .result{
            width: 200px;
            height: 200px;
            text-align: center;
            box-sizing: border-box;
        }
        #file_input{
            display: none;
        }
        .delete{
            width: 200px;
            height:200px;
            position: absolute;
            text-align: center;
            line-height: 200px;
            z-index: 10;
            font-size: 30px;
            background-color: rgba(255,255,255,0.8);
            color: #777;
            opacity: 0;
            transition-duration: :0.7s;
            -webkit-transition-duration: 0.7s;
        }
        .delete:hover{
            cursor: pointer;
            opacity: 1;
        }
    </style>
</head>
<body>
<input type="text" name="" id="name" placeholder="公司名">
<input type="text" name="" id="link" placeholder="经理名">
<div class="container">
    <label>请选择一个图像文件：</label>
    <button id="select">(重新)选择图片</button>
    <button id="add">(追加)图片</button>
    <!--用input标签并选择type=file，记得带上multiple，不然就只能单选图片了-->
    <input type="file" id="file_input" multiple/>
    <button id="submit">提交</button>
</div>
</body>