<body>
  <style>
    img {
      width: 200px;
      height: 200px;
      object-fit: contain;
      margin: 5px;
    }
  </style>

  <input type="file" name="" id="addPic" onchange="handleFileChange()" multiple="multiple">

  <div id="preview1">
    <h2>Blob File List</h2>
  </div>

  <div id="preview2">
    <h2>Base64 File List</h2>
  </div>

  <script>
    document.getElementById('addPic').onchange = function () {
      console.log(this.files)
      for (const file of this.files) {
        file2Blob(file)
        file2Base64(file)
      }
    }

    function addImg(src, id) {
      const img = document.createElement('img')
      img.src = src
      document.getElementById(id).appendChild(img)
    }

    function file2Blob(file) {
      const blob = window.URL.createObjectURL(file)
      addImg(blob, 'preview1')
    }

    function file2Base64(file) {
      const reader = new FileReader()
      reader.readAsDataURL(file)
      reader.onload = function () {
        addImg(this.result, 'preview2')
      }
    }
  </script>

  <div>
    <h2>Input And Download</h2>
    <input id="text" type="text">
    <button id="button">download text</button>
    <div id="info"></div>
  </div>

  <script>
    document.getElementById('button').onclick = function () {
      const content = document.getElementById('text').value
      const blob = new Blob([content], { type: 'text/plain' })
      document.getElementById('info').innerText = `size: ${blob.size}字节; type: ${blob.type}`
      const link = document.createElement('a')
      link.download = 'blob.txt'
      link.href = window.URL.createObjectURL(blob)
      link.click()
    }
  </script>

</body>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.