当前位置：网站首页>JS file block to Base64 text

JS file block to Base64 text

2022-06-30 04:10:00 【Runqing】
<!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>
  </head>
  <body>
    <!-- FileList  Object each selected file . If  multiple  Property is not specified , Then the list has only one member . -->
    <input type="file" multiple="multiple" id="file" />

    <script>
      window.onload = function () {
    
        handleSelectFile()
      }


      function handleSelectFile () {
    
        var fileEle = document.getElementById('file')
        fileEle.onchange = async function (e) {
    
          var files = e.target.files
          let name, size, type
          if (files && files.length > 0)  {
    
            filesTask(files).then(res => {
    
                console.log('res', res)
            })
          }
        }
      }

      async function filesTask (files, path) {
    
          const filesResult = []
          var file;
          //  Traverse all files 
          for (var i = 0; i < files.length; i++) {
    
            file = files[i];
            console.log(`file${
      i}:`, file)
            const base64FileArr = await fileToBase64Arr(file)
            filesResult.push(base64FileArr)
          }
          return filesResult
      }

      function fileToBase64Arr (file) {
    
        const fileSlice = sliceFile(file)
        // console.log('fileSlice', fileSlice)
        return readFileSlice(fileSlice)
      }

      // size Set slice size , Current unit is 1kb, It can be done by unit and size adjustment 
      function sliceFile(file, unit = 100) {
    
        const size = unit * 1024
        const result = []
        let start = 0, current = 0, end = file.size
        while(start < end) {
    
          if((end-start) > size) {
    
            current = start + size
          } else {
    
            current = end
          }
          result.push(file.slice(start, current))
          start = current
        }
        return result
      }

      async function readFileSlice(fileSlice) {
    
        const result = []
        for await (let fileText of fileSlice.map(file => readFile(file))){
    
          // console.log('fileText', fileText)
          result.push(fileText)
        }
        return result
      }

      function readFile (file) {
    
        return new Promise(resolve => {
    
          var reader = new FileReader();
          //  When  FileReader  The way to read the file is  readAsArrayBuffer, readAsBinaryString, readAsDataURL  perhaps  readAsText  When , It will trigger a  load (en-US)  event .
          reader.onload = function (res) {
    
            // console.log('res', res)
            // ①. hold 3 Bytes become 4 Bytes .② Every time 76 Characters plus a newline .③. The last terminator also deals with . therefore base64 After the coding , The byte length will be larger than the original 1/3（1/76 Just ignore ）
            const result = event.target.result
            // console.log('result', result)
            // console.log(' length ',result.length)
            resolve(result)
          }
          // readAsDataURL  Method will read the specified  Blob  or  File  object . When the read operation is complete ,readyState  It will become finished DONE, And trigger  loadend (en-US)  event , meanwhile  result  Property will contain a data:URL Format string （base64 code ） To represent the contents of the read file .
          reader.readAsDataURL(file)
        })
      }
    </script>
  </body>
</html>
原网站
版权声明
本文为[Runqing]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/02/202202160627472070.html
当前位置：网站首页>JS file block to Base64 text

JS file block to Base64 text

边栏推荐

猜你喜欢

随机推荐
