JavaScript文件类

最新推荐文章于 2024-01-02 08:02:25 发布

李守聪

最新推荐文章于 2024-01-02 08:02:25 发布

阅读量163

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/sddzlsc/article/details/116700336

版权

前端专栏收录该内容

17 篇文章 0 订阅

订阅专栏

<!--
 * @Author: your name
 * @Date: 2021-05-12 10:52:11
 * @LastEditTime: 2021-05-12 11:13:04
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \ruanjiankaifa\lx5\index.html
-->
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
 </head>
 <body>
     <style>
         .fff{
             display:none
         }
         .box{
             width: 100%;
             height: 200px;
             background-color: #f00;
         }
     </style>
     <form>

        <ul>
            <li>
                <label for="file1" id ="abc" >上传图片</label>
                <input type="file" multiple id="file1" name="file1" class="fff">
            </li>
        </ul>
        <div id="box" class="box"></div>
     </form>
     <script>
         var f=document.getElementById("file1")
         var box=document.getElementById("box")
         f.onchange=(e)=>{
             let f1=e.target.files[0]
             console.log(f1)
             let freader=new FileReader()
             freader.readAsDataURL(f1)
             freader.onload=(e)=>{
                 let r=e.target.result
                 let img1=document.createElement("img")
                 img1.src=r
          
                 box.appendChild(img1)
                 img1.addEventListener("click",function(){
                     box.removeChild(img1)
                 })
                }
         }
     </script>
 </body>
 </html>

李守聪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript文件类

 <!DOCTYPE html> <
复制链接

扫一扫