SOURCE

  <link rel="stylesheet" href="https://unpkg.com/bootstrap-material-design@4.1.1/dist/css/bootstrap-material-design.min.css"
    integrity="sha384-wXznGJNEXNG1NFsbm0ugrLFMQPWswR3lds2VeinahP8N0zJw9VWSopbjv2x7WCvX" crossorigin="anonymous">

  <label for="a" class="btn btn-primary dropEle">点击(拖拽)上传</label>
  <input id='a' name="file" type="file" accept="image/png, image/jpeg, video/*" style="display:none;" multiple='multiple'>

  <!-- 展示上传的图片 -->
  <div class="previewImage">
  </div>
  <script>
    const l = console.log

    const qs = s => document.querySelector(s)
    let dropEle = document.querySelector('.dropEle')
    dropEle.addEventListener("dragenter", dragenter, false);
    dropEle.addEventListener("dragover", dragover, false);
    dropEle.addEventListener("drop", drop, false);

    function dragenter(e) {
      e.stopPropagation();
      e.preventDefault();
    }

    function dragover(e) {
      e.stopPropagation();
      e.preventDefault();
    }

    function drop(e) {
      e.stopPropagation();
      e.preventDefault();

      var dt = e.dataTransfer;
      var files = dt.files;

      handleFiles(files);
    }

    let fileEle = document.querySelector('#a')
    fileEle.onchange = () => {
      return handleFiles(fileEle.files)
    }

    function handleFiles(files) {
      if (files.length === 0) return false;
      l(files[0])

      let img, src,
      preview = qs('.previewImage');

      for(let file of files){
        img = document.createElement('img')
        src = URL.createObjectURL(file)
        
        Object.assign(img, {
          src,
          width: '400',
        })
        img.dataset.myname= file.name
        img.onlaod = () => URL.revokeObjectURL(src)
        preview.append(img)
      }
    }
  </script>

    html, body {
      width: 100%;
      height: 100%;
    }
    .box {
  margin: 40px;
  position: relative;
  display: inline-block;
  width: 300px;
  height: 10px;
  border: 1px solid rgba(0, 0, 0, .2);
  overflow: hidden;
  border-radius: 6px;
}

.box > .progress {
  position: absolute;
  display: inline-block;
  height: 10px;
  background-color: red;
  transition: transform 20ms ease-out;
}

.ding {
   box-shadow: -1px 1px 15px 4px #81ea6e;
}