JS幻想 读取二进制文件第2/2页

浏览器中读取二进制文件需要使用 FileReader 和 Blob 对象。下面介绍一下具体的操作步骤。

步骤一：获取文件

通过文件选择器或者其他方式获取二进制文件的实例。可以使用 <input> 标签加上 accept 属性来实现文件选择器。

<input type="file" accept=".bin">

以上代码表示只允许选择 .bin 类型的文件。

步骤二：读取文件

使用 FileReader 对象来读取刚刚获取的文件，调用 readAsArrayBuffer 方法将文件读取为二进制数组。

const reader = new FileReader();
const file = document.querySelector('input[type=file]').files[0];
reader.readAsArrayBuffer(file);

步骤三：处理文件

当文件加载完成后，会触发 load 事件，此时可以处理文件了。可以将二进制数组转换为正确的数据类型进行处理。

reader.onload = function() {
  const buffer = reader.result;
  const dataView = new DataView(buffer);
  const int8Val = dataView.getInt8(0);
  console.log(int8Val);
};

示例1：读取图片文件并显示

<input type="file" accept=".jpg, .png" onchange="loadImage(event)">

<img src="" id="output" />

<script>
function loadImage(event) {
  const reader = new FileReader();
  const file = event.target.files[0];
  reader.onload = function() {
    const url = reader.result;
    const img = document.getElementById('output');
    img.src = url;
  }
  reader.readAsDataURL(file);
}
</script>

以上代码表示选取图片文件后，将图片文件转换为 base64 编码的字符串并显示在页面上。

示例2：读取音频文件并播放

<input type="file" accept=".mp3" onchange="loadAudio(event)">
<audio controls id="myAudio"></audio>

<script>
function loadAudio(event) {
  const reader = new FileReader();
  const file = event.target.files[0];
  reader.onload = function() {
    const arrayBuffer = reader.result;
    const audioCtx = new AudioContext();
    audioCtx.decodeAudioData(arrayBuffer, function(buffer) {
      const source = audioCtx.createBufferSource();
      source.buffer = buffer;
      source.connect(audioCtx.destination);
      source.start();
    });
  }
  reader.readAsArrayBuffer(file);
}
</script>

以上代码表示选取音频文件后，将音频文件读取为二进制数组并解析成 buffer，最后通过 web audio api 播放。