HTML批量文件上传1——图像预览方式

私语茶馆

已于 2024-05-11 21:11:37 修改

阅读量1.7k

点赞数 38

分类专栏：云部署与开发文章标签： css 前端 java 批量文件上传文件预览

于 2024-04-26 15:42:33 首次发布

本文链接：https://blog.csdn.net/sunbeacher/article/details/138210504

版权

作者：私语茶馆

1.HTML多文件上传的关键方案

多文件上传包括：文件有效性校验，文件预览、存储和进度展示多个方面，本章节介绍的是文件预览的实现方案。

2.文件上传前预览

2.1.效果

选择文件前：

选择文件后：

2.2.CSS文件代码

StorageCenter.css代码

html {
    font-family: sans-serif;
}

form {
    font-size: 25px;
    padding: 5px 5px 5px 5px;
}

form button, form label{
    font-size: 25px;
    padding: 5px 5px 5px 5px;
}

form img {
    height: 64PX;
    width: 64px;
    order: 1;
    float: right;
}


input{
    font-size: 25px;
    padding: 5px 5px 5px 5px;
}

input::file-selector-button{
    font-size: 25px;
}

.clearfix:after {
    content: "";
    display: table;
    clear: both;
}

form li, div > p {
    background: #eee;
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    list-style-type: none;
    border: 1px solid black;
}

.preview{
    font-size: 15px;
}

其中form img是预览后，触发script生成的图片源宿，li p都是动态生成的预览区源宿，显示文件基本信息。

2.3.HTML文件

<body>

<form method="post" enctype="multipart/form-data">
    <div>
        <label for="image_uploads" style="font-size:25px;"> 选择上传图片:</label>
        <input
                type="file"
                id="image_uploads"
                name="image_uploads"
                accept=".jpg, .jpeg, .png"
                multiple />
    </div>
    <div class="preview">
        <p>【预览区】</p>
    </div>
    <clearfix></clearfix>
    <div>
        <button>上传</button>
    </div>
</form>

<script>
    const input = document.getElementById('image_uploads');
    const preview = document.querySelector('.prev