原生封装最简单上传

大团米线

于 2022-08-14 22:24:01 发布

阅读量95

点赞数

分类专栏：前端文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/qq_60500942/article/details/126337437

版权

前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
     * {
         margin: 0;
         padding: 0;
     }

     button {
         padding: 12px 20px;
         background-color: #ccc;
         color: #fff;
         outline: none;
         border: 1px solid #ccc;
         border-radius: 5px;
     }

     .file-input {
         display: none;
     }
 </style>
</head>

<body>
 <!-- 上传 -->
 <input type="file" class="file-input" id="fileInput" multiple="multiple">
 <!--multiple多选-->
 <div id="content"></div>

 <button id="btn">上传文件</button>

 <script>
     let fileList = []

     // 获取input   Dom
     const fileInput = document.getElementById('fileInput')
     console.log(fileInput);


     fileInput.onchange = (e) => {
         console.log(e.target.files);
         fileList.unshift(...e.target.files)
         console.log(fileList);
     }

     fileInput.onclick = (e) => {
         console.log(e);
     }
     // 获取Button Dom
     const btn = document.getElementById('btn')

     console.log(btn);


     // 按钮点击事件
     btn.onclick = () => {
         fileInput.click()
     }
 </script>
</body>

</html>