• 案例 - 拖拽上传文件,生成缩略图

    直接看效果

    实现代码

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>拖拽上传文件title>
    8.     <style>
    9.         /* 拖拽容器 */
    10.         .box-container {
    11.             position: relative;
    12.             display: flex;
    13.             justify-content: center;
    14.             align-items: center;
    15.             border: 1px dashed black;
    16.             border-radius: 7px;
    17.             width: 200px;
    18.             height: 100px;
    19.         }
    20.  
    21.         .box1 {
    22.             position: absolute;
    23.             width: 10px;
    24.             height: 50px;
    25.             background: black;
    26.         }
    27.  
    28.         .box2 {
    29.             position: absolute;
    30.             width: 50px;
    31.             height: 10px;
    32.             background: black;
    33.         }
    34.  
    35.         .dropbox {
    36.             position: absolute;
    37.             opacity: 0;
    38.             width: 100%;
    39.             height: 100%;
    40.             line-height: 100px;
    41.             text-align: center;
    42.             font-size: 20px;
    43.             font-weight: 900;
    44.             background: rgb(0, 0, 0, 0.3);
    45.  
    46.         }
    47.  
    48.         /* 图片容器 */
    49.         .img-container {
    50.             width: 500px;
    51.             height: 500px;
    52.             border: 1px solid black;
    53.             border-radius: 10px;
    54.             box-shadow: 2px 2px 20px 3px black;
    55.             overflow: auto;
    56.         }
    57.  
    58.         .img-item {
    59.             float: left;
    60.             width: 50px;
    61.             height: 50px;
    62.             margin: 5px;
    63.             border: 1px solid black;
    64.             border-radius: 10px;
    65.         }
    66.     style>
    67. head>
    68.  
    69. <body>
    70.     <div class="box-container">
    71.         <div class="box1">div>
    72.         <div class="box2">div>
    73.         <div class="dropbox">拖拽上传文件div>
    74.     div>
    75.     <br>
    76.     <hr>
    77.     <br>
    78.     <div class="img-container">div>
    79.  
    80. body>
    81. <script>
    82.  
    83.  
    84.     let dropbox = document.querySelector('.dropbox')
    85.     dropbox.addEventListener("dragenter", dragenter, false)
    86.     dropbox.addEventListener("dragover", dragover, false)
    87.     dropbox.addEventListener("drop", drop, false)
    88.     dropbox.addEventListener('dragleave', dragleave, false)
    89.  
    90.     function dragenter(e) {
    91.         e.stopPropagation();
    92.         e.preventDefault();
    93.     }
    94.  
    95.     // 进入拖拽容器
    96.     function dragover(e) {
    97.         e.stopPropagation();
    98.         e.preventDefault();
    99.         dropbox.style.cssText = `
    100.         opacity: 1;`
    101.     }
    102.  
    103.     // 离开拖拽容器
    104.     function dragleave(e) {
    105.         e.stopPropagation();
    106.         e.preventDefault();
    107.         dropbox.style.cssText = `
    108.         opacity: 0;`
    109.     }
    110.  
    111.     // 将拖拽标签放在拖拽容器上(鼠标松开)
    112.     function drop(e) {
    113.         e.stopPropagation();
    114.         e.preventDefault();
    115.  
    116.         dropbox.style.cssText = `
    117.         opacity: 0;`
    118.  
    119.         const dt = e.dataTransfer;
    120.         const files = dt.files;
    121.         console.log(dt.files);
    122.  
    123.         handleFiles(files);
    124.     }
    125.  
    126.     let imgContainer = document.querySelector('.img-container')
    127.     /** 
    128.      * handleFiles() 处理文件列表
    129.      * 
    130.      * @param files 文件列表
    131.      * @return 
    132.      */
    133.     function handleFiles(files) {
    134.         for (const file of files) {
    135.             if (!file.type.startsWith("image")) {
    136.                 continue
    137.             }
    138.  
    139.             const img = document.createElement('img')
    140.             img.classList.add('img-item')
    141.  
    142.             // 读取文件流
    143.             const reader = new FileReader()
    144.             reader.onload = (e) => {
    145.                 img.src = e.target.result
    146.                 imgContainer.appendChild(img)
    147.             }
    148.             reader.readAsDataURL(file)
    149.         }
    150.     }
    151.  
    152. script>
    153.  
    154. html>

  • 相关阅读:
    vue+vite+ts添加eslint校验和代码提交校验
    计算机缺失d3dcompiler_47.dll解决方案,如何修复电脑缺失d3d文件
    【C++】——类和对象(中)
    MybatisPlus中queryWrapper的or的使用
    06. Nginx进阶-Nginx代理服务
    传统制造业如何进行数据分析?_光点科技
    创建定时任务——crontab的使用
    深度学习入门（五十六）循环神经网络——循环神经网络RNN
    js对三层数组进行数据筛选
    【温故而知新】构建高可用Linux服务器（一）
  • 原文地址：https://blog.csdn.net/Qhx20040819/article/details/134298414