js图片上传功能，vue图片上传，重复上传相同路径图片

<!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;
    }

    .box {
      margin: 30px;
      border: 1px solid;
      width: 540px;
      height: 600px;
    }

    .box2 {
      padding: 10px;
      border-bottom: 1px solid;
    }

    .shangchuan {
      background-color: aquamarine;
      border: 1px solid aqua;
      padding: 10px 20px;
    }

    img {
      width: 100px;
      height: 100px;
      margin-right: 10px;
      margin-bottom: 10px;
      float: left;
      display: block;
    }

    img:nth-child(5n) {
      margin-right: 0;
    }

    .clearfix {
      content: "";
      display: block;
      clear: both;
    }

    .clearfix::after {
      zoom: 1;
    }
  </style>
</head>

<body>
  <div class="box">
    <!-- 上传按钮 -->
    <div class="box2">
      <!-- multiple：多图上传   hidden：隐藏  accept:限制上传图片类型 -->
      <input type="file" id="file" multiple hidden accept="image/*">
      <button class="shangchuan">上传图片</button>
    </div>

    <!-- 图片显示区 -->
    <div class="tupian clearfix">
      <img src="./src/0.jpeg" alt="">
    </div>
  </div>
</body>

<script>
  let file = document.querySelector('#file')
  let btn = document.querySelector('.shangchuan')
  let box = document.querySelector('.tupian')
  // 点击按钮触发input框
  btn.onclick = function () {
    file.click()
  }

  // 监听input选的文件
  file.onchange = function (e) {
    // 存储数据和进度条
    let fileArr = Array.from(e.target.files)

    // 图片上传
    fileArr.forEach((file, index) => {
      //异步读取文件内容，结果用data:url的字符串形式表示
      let reader = new FileReader();
      reader.readAsDataURL(file);

      // 监听文件读取完成
      reader.onload = function (e) {
        box.innerHTML += (`
          <img src="${reader.result}" alt=""/>
        `)
      }

      /*
          发送数据：FormData 接口提供了一种表示表单数据的键值对 key/value 的构造方式，
                  并且可以轻松的将数据通过XMLHttpRequest.send() 方法发送出去，本接口和此方法都相当简单直接
          let formdata = new FormData()
          formdata.append('img', item.file)
      */
    })

    // 清空路径和图片，以防第二次选择相同数量图片不上传
    e.target.value = ""
  }
</script>

</html>
js图片上传功能，vue图片上传，重复上传相同路径图片

猜你喜欢
