JS 第三方工具封装经典案例(图片上传预览)

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>test</title>
  <style>
    ul,
    li {
      list-style-type: none;
      margin: 0;
      padding: 0;
    }

    .out-main-top {
      height: auto;
      overflow: auto;
      display: flex;
      justify-content: flex-start;
    }

    .out-main-top button {
      padding: 10px 40px;
      font-weight: bold;
      font-size: 21px;
      height: 52px;
      margin-left: 30px;
      vertical-align: middle;
      margin-top: 60px;
    }

    .canvas-img {
      margin-top: 20px;
      clear: both;
    }

    .canvas-img li {
      width: 150px;
      height: 150px;
      position: relative;
      border: 1px solid #ccc;
      cursor: pointer;
      float: left;
      margin-right: 10px;
      overflow: hidden;
    }

    .canvas-img li img {
      width: 90%;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }

    .canvas-img li .close {
      position: absolute;
      right: 4px;
      top: 1px;
      font-style: normal;
      font-size: 12px;
      color: #666;
    }

    .add-pic-box {
      width: 200px;
      height: 200px;
      border: 1px dashed #999;
      border-radius: 4px;
      cursor: pointer;
      background: #fff url('./images/upload.png') center center no-repeat;
    }

    .drag-box {
      width: 250px;
      height: 200px;
      border: 1px dashed #ccc;
      margin-left: 20px;
      color: #ccc;
      font-size: 15px;
      text-align: center;
      padding-top: 90px;
      box-sizing: border-box;
    }
  </style>
</head>

<body>
  <!-- <input type="file" id="myinput" onchange="uploadFile()"> -->
  <div class="out-main-top">
    <div class="add-pic-box" id='addPicBox'>
      <input type="file" name="pic[]" multiple id="myinput" onchange="uploadFile()" style="display: none">
    </div>
    <div id="dropbox" class="drag-box">
      或者将文件拖到此处
    </div>
    <button onclick="uploadFileNow()">上传</button>
  </div>
  <ul id="canvasImg" class="canvas-img"></ul>
  <script>
    var myinput = document.getElementById('myinput');
    var canvasImg = document.getElementById('canvasImg');
    var dropbox = document.getElementById('dropbox');
    var allBaseImg = []; //需要给到后台的图片数据
    var AllowImgFileSize = 1024 * 400; //上传图片最大值(单位字节)超过400K上传失败

    document.getElementById('addPicBox').addEventListener('click', function (ev) {
      myinput.click();
    })

    function uploadFile() {
      var files = myinput.files;
      //处理图片
      transferBase(files);
    }

    function transferBase(files) {
      for (var i = 0, len = files.length; i < len; i++) {
        var file = files[i];
        var reader = new FileReader();
        //用于图片显示
        reader.readAsDataURL(file);

        //ArrayBuffer
        // reader.readAsArrayBuffer(file);
        reader.onload = function (e) {
          var base64 = e.target.result;

          var index = allBaseImg.indexOf(base64);
          if (index != -1) {
            console.log('图片已经上传过了!');
            return;
          }

          var str = `<li><img src="${base64}"><i class="close">X</i></li>`;
          // var str = '<li><img src="'+base64+'"><i class="close">X</i></li>';
          canvasImg.innerHTML += str;
          allBaseImg.push(base64);
        }

      }
    }

    canvasImg.addEventListener('click', function (ev) {
      var target = ev.target;
      if (target.className == 'close') {
        var thisbase = target.offsetParent.querySelector('img').getAttribute('src');
        var index = allBaseImg.indexOf(thisbase);
        allBaseImg.splice(index, 1);
        target.offsetParent.remove()
      }
    })

    function uploadFileNow() {
      //调接口
      console.log(allBaseImg);
    }


    dropbox.addEventListener('dragover', function (e) {
      e.stopPropagation();
      e.preventDefault();
    }, false);

    dropbox.addEventListener('drop', function (e) {
      e.stopPropagation();
      e.preventDefault();

      var dtfiles = e.dataTransfer.files;

      transferBase(dtfiles); //转化成banse64 
      //  transferBlob(dtfiles);  //arraybuffer
    }, false);
  </script>
</body>

</html>
©️2020 CSDN 皮肤主题: 代码科技 设计师:Amelia_0503 返回首页