JavaScript读二进制文件并用ajax传输二进制流的方法

JavaScript 读取二进制文件以及使用 AJAX 传输二进制流的方法包含以下几个步骤。

步骤 1：读取二进制文件

在 JavaScript 中，使用 FileReader API 读取二进制文件。FileReader API 允许Web应用程序异步读取存储在用户计算机上的文件的内容，并提供对该文件数据的访问。使用FileReader对象来读取文件

function readBinaryFile(file, callback) {
  let reader = new FileReader();
  reader.onload = function(event) {
    let arrayBuffer = reader.result;
    let bytes = new Uint8Array(arrayBuffer);
    callback(bytes);
  };
  reader.readAsArrayBuffer(file);
}

以上代码在 FileReader 的 onload 回调中将文件内容存储在 arrayBuffer 里面，然后将 arrayBuffer 转换成 Uint8Array。最后，回调函数将以 Uint8Array 的形式返回文件内容。

步骤 2：使用 AJAX 发送二进制流

由于 AJAX 的默认行为是使用文本格式，需要设置请求头为 application/octet-stream 格式，表示二进制流，然后将使用 send 方法发送 ArrayBuffer 对象。以下是 AJAX 的示例代码。

function sendBinaryData(url, data, successCallback, errorCallback) {
  let xhr = new XMLHttpRequest();
  xhr.open("POST", url, true);
  xhr.setRequestHeader("Content-Type", "application/octet-stream");
  xhr.send(data);
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
      if (xhr.status === 200) {
        successCallback(xhr.response);
      } else {
        errorCallback(xhr.statusText);
      }
    }
  };
}

在以上示例中，发送数据的核心函数是 sendBinaryData。该函数将 ArrayBuffer 作为 data 参数传入，并将请求头设置为 application/octet-stream。如果 AJAX 请求成功，则调用 successCallback 函数，传递响应的 ArrayBuffer。如果 AJAX 请求失败，则将报错信息传递给 errorCallback。

示例 1：将二进制文件发送到服务器

以下示例演示如何使用 readBinaryFile 和 sendBinaryData 函数将包含二进制文件的 formData 对象发送到服务器。

let formData = new FormData();
formData.append("binaryFile", file);

readBinaryFile(file, function(binaryData) {
  sendBinaryData("http://example.com/upload", binaryData, function(response) {
    console.log("Upload success: " + response);
  }, function(error) {
    console.error("Upload error: " + error);
  });
});

在以上示例中，我们将二进制文件读取后存储在 FormData 对象中，通过 AJAX 发送到服务器。回调函数用于处理上传成功和失败的响应。

示例 2：使用 WebSocket 发送二进制流

以下示例演示如何使用 WebSocket 发送二进制流。

let socket = new WebSocket("ws://example.com");
socket.binaryType = "arraybuffer";
socket.onopen = function() {
  readBinaryFile(file, function(binaryData) {
    socket.send(binaryData);
  });
};
socket.onmessage = function(event) {
  console.log("Received: " + event.data);
};

在以上示例中，我们使用 WebSocket 对象创建一个 WebSocket 连接。然后，通过设置 socket.binaryType 属性指定返回的数据类型为 arraybuffer。之后使用 readBinaryFile 将文件内容以 Uint8Array 的方式读取，并通过 WebSocket 连接发送。最后，通过 socket.onmessage 监听服务器响应。