单文件上传

最新推荐文章于 2023-04-12 18:10:27 发布

Kratial

最新推荐文章于 2023-04-12 18:10:27 发布

阅读量117

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/Kratial/article/details/115909444

版权

js 专栏收录该内容

28 篇文章 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>单个图片上传</title>
    <style>
        img{
            width:200px;
            height:200px;
        }
        .wrap{
            width:200px;
            height:200px;
            background-color:aquamarine;
            position:relative;
        }
        .cover{
            display:block;
            position: absolute;
            top:50%;
            left:50%;
            transform: translate(-50%,-50%);
            font-size:50px;
            z-index:10;
            font-weight:100;
        }
        #image{
            outline: none;
            border: none;
            position:absolute;
            width:100%;
            top:0;
            bottom:0;
            font-size:0;
            opacity: 0;
            background-color:aquamarine;
            z-index:11;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <span class="cover">+</span>
        <input type="file" id="image" accept="image/*">
    </div>
    <img class="show" src="" alt="">
    <script>
      let elem1 = document.querySelector('#image')
      let img = document.querySelector('.show')
      elem1.onchange=function(val){
          let fileData = new FormData()
          if (this.files[0]) {
              let reader = new FileReader()//调用FileReader
              reader.readAsDataURL(this.files[0])//将文件读取为 DataURL(base64)
              // 读取操作完成时进行如下操作
              reader.onload = function (val) {
                img.src = val.target.result
              }
              fileData.append("file",elem1.files[0])
              // 下面可以进行服务端请求
          }
      }
    </script>
</body>
</html>

Kratial

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
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>单个图
复制链接

扫一扫

专栏目录