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

    作者：私语茶馆

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

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

    2.文件上传前预览

    2.1.效果

    选择文件前：

    选择文件后：

    2.2.CSS文件代码

    StorageCenter.css代码

    1. html {
    2.     font-family: sans-serif;
    3. }
    4.  
    5. form {
    6.     font-size: 25px;
    7.     padding: 5px 5px 5px 5px;
    8. }
    9.  
    10. form button, form label{
    11.     font-size: 25px;
    12.     padding: 5px 5px 5px 5px;
    13. }
    14.  
    15. form img {
    16.     height: 64PX;
    17.     width: 64px;
    18.     order: 1;
    19.     float: right;
    20. }
    21.  
    22.  
    23. input{
    24.     font-size: 25px;
    25.     padding: 5px 5px 5px 5px;
    26. }
    27.  
    28. input::file-selector-button{
    29.     font-size: 25px;
    30. }
    31.  
    32. .clearfix:after {
    33.     content: "";
    34.     display: table;
    35.     clear: both;
    36. }
    37.  
    38. form li, div > p {
    39.     background: #eee;
    40.     display: flex;
    41.     justify-content: space-between;
    42.     margin-bottom: 10px;
    43.     list-style-type: none;
    44.     border: 1px solid black;
    45. }
    46.  
    47. .preview{
    48.     font-size: 15px;
    49. }

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

    2.3.HTML文件

    1. <body>
    2.  
    3. <form method="post" enctype="multipart/form-data">
    4.     <div>
    5.         <label for="image_uploads" style="font-size:25px;"> 选择上传图片:</label>
    6.         <input
    7.                 type="file"
    8.                 id="image_uploads"
    9.                 name="image_uploads"
    10.                 accept=".jpg, .jpeg, .png"
    11.                 multiple />
    12.     </div>
    13.     <div class="preview">
    14.         <p>
  • 相关阅读:
    【中国知名企业高管团队】系列22：滴滴
    快速实现 CDN 直播
    NVR新版界面看回放时音频功能如何开启
    vue使用Element-plus的Image预览时样式崩乱
    mongo基础操作总结
    Java攻略之API
    北斗导航 | GBAS发展与应用支持CAT II/III类精密进近
    基本的五大排序算法
    RecyclerView懒加载失效问题（三）
    Roreg复现
  • 原文地址：https://blog.csdn.net/sunbeacher/article/details/138210504