ArrayBuffer 中的 Uint8Array 为空

Question

我一直在尝试编写一个处理文件的程序，为此我需要将文件的数组缓冲区转换为 Uint8Array。问题是当我运行我的代码数组为空时。我正在寻找的数组是 fdata 数组。 请不要告诉我使用服务器端程序，因为我无法将服务器端代码放在我正在使用的平台上。

<body>
  <input type="file" id="files" name="files[]" multiple />
  <div id="outimg"></div>
  <script>
    function handleFileSelect(evt) {
      var files = evt.target.files;
      console.log(files);
      for (var i = 0, f; f = files[i]; i++) {
        var reader = new FileReader();

        reader.onload = (function(theFile) {
          return function(e) {
            console.log(e.target.result);
          };
        })(f);

        reader.readAsArrayBuffer(f);

        fdata = new Uint8Array(reader.result);

        console.log(fdata);

        window.cvd = [];

        for (var i = 0, n = window.fdata.length; i < n; i += 3) {
          var a = Array.from(window.fdata.slice(i, i + 3));
          a.push(255);
          window.cvd.push(a);
        }


      }
    }

    document.getElementById('files').addEventListener('change', handleFileSelect, false);
  </script>
</body>

Answer 1

Reader 结果在加载文件时可用，因此请尝试在 onload 事件处理程序中访问它：

<body>
  <input type="file" id="files" name="files[]" multiple />
  <div id="outimg"></div>
  <script>
    function handleFileSelect(evt) {
      var files = evt.target.files;
      console.log(files);
      for (var i = 0, f; f = files[i]; i++) {
        var reader = new FileReader();

        reader.onload = (function(theFile) {
          return function(e) {
            console.log(e.target.result);
            fdata = new Uint8Array(reader.result);

            console.log(fdata);

            window.cvd = [];

            for (var i = 0, n = window.fdata.length; i < n; i += 3) {
              var a = Array.from(window.fdata.slice(i, i + 3));
              a.push(255);
              window.cvd.push(a);
            }
          };
        })(f);

        reader.readAsArrayBuffer(f);




      }
    }

    document.getElementById('files').addEventListener('change', handleFileSelect, false);
  </script>
</body>

ArrayBuffer 中的 Uint8Array 为空

Uint8Array from ArrayBuffer is empty

html

javascript

arrays

arraybuffer

html5-canvas