Hướng dẫn javascript get binary data from file - javascript lấy dữ liệu nhị phân từ tệp

Thuộc tính responseType của đối tượng XMLHTTPrequest có thể được đặt để thay đổi loại phản hồi dự kiến ​​từ máy chủ. Các giá trị có thể là chuỗi trống (mặc định), "arraybuffer", "blob", "document",

const req = new XMLHttpRequest();
req.open("GET", "/myfile.png", true);
req.responseType = "blob";

req.onload = (event) => {
  const blob = req.response;
  // ...
};

oReq.send();
0 và
const req = new XMLHttpRequest();
req.open("GET", "/myfile.png", true);
req.responseType = "blob";

req.onload = (event) => {
  const blob = req.response;
  // ...
};

oReq.send();
1. Thuộc tính
const req = new XMLHttpRequest();
req.open("GET", "/myfile.png", true);
req.responseType = "blob";

req.onload = (event) => {
  const blob = req.response;
  // ...
};

oReq.send();
2 sẽ chứa cơ thể thực thể theo responseType, dưới dạng
const req = new XMLHttpRequest();
req.open("GET", "/myfile.png", true);
req.responseType = "blob";

req.onload = (event) => {
  const blob = req.response;
  // ...
};

oReq.send();
4,
const req = new XMLHttpRequest();
req.open("GET", "/myfile.png", true);
req.responseType = "blob";

req.onload = (event) => {
  const blob = req.response;
  // ...
};

oReq.send();
5,
const req = new XMLHttpRequest();
req.open("GET", "/myfile.png", true);
req.responseType = "blob";

req.onload = (event) => {
  const blob = req.response;
  // ...
};

oReq.send();
6,
const req = new XMLHttpRequest();
req.open("GET", "/myfile.png", true);
req.responseType = "blob";

req.onload = (event) => {
  const blob = req.response;
  // ...
};

oReq.send();
7 hoặc chuỗi. Đây là
const req = new XMLHttpRequest();
req.open("GET", "/myfile.png", true);
req.responseType = "blob";

req.onload = (event) => {
  const blob = req.response;
  // ...
};

oReq.send();
8 nếu yêu cầu không hoàn thành hoặc không thành công.

Ví dụ này đọc một hình ảnh dưới dạng tệp nhị phân và tạo một mảng số nguyên không dấu 8 bit từ các byte thô. Lưu ý rằng điều này sẽ không giải mã được hình ảnh và đọc các pixel. Bạn sẽ cần một thư viện giải mã PNG cho điều đó.

const req = new XMLHttpRequest();
req.open("GET", "/myfile.png", true);
req.responseType = "arraybuffer";

req.onload = (event) => {
  const arrayBuffer = req.response; // Note: not req.responseText
  if (arrayBuffer) {
    const byteArray = new Uint8Array(arrayBuffer);
    byteArray.forEach((element, index) => {
      // do something with each byte in the array
    });
  }
};

req.send(null);

Bạn cũng có thể đọc một tệp nhị phân dưới dạng

const req = new XMLHttpRequest();
req.open("GET", "/myfile.png", true);
req.responseType = "blob";

req.onload = (event) => {
  const blob = req.response;
  // ...
};

oReq.send();
5 bằng cách đặt chuỗi "blob" thành thuộc tính responseType.

const req = new XMLHttpRequest();
req.open("GET", "/myfile.png", true);
req.responseType = "blob";

req.onload = (event) => {
  const blob = req.response;
  // ...
};

oReq.send();

Nhận dữ liệu nhị phân trong các trình duyệt cũ hơn

Hàm

function loadBinaryResource(url) {
  const req = new XMLHttpRequest();
  req.open("GET", url, false);

  // XHR binary charset opt by Marcus Granado 2006 [http://mgran.blogspot.com]
  req.overrideMimeType("text/plain; charset=x-user-defined");
  req.send(null);
  return req.status === 200 ? req.responseText : "";
}
2 được hiển thị bên dưới tải dữ liệu nhị phân từ URL được chỉ định, trả lại cho người gọi.

function loadBinaryResource(url) {
  const req = new XMLHttpRequest();
  req.open("GET", url, false);

  // XHR binary charset opt by Marcus Granado 2006 [http://mgran.blogspot.com]
  req.overrideMimeType("text/plain; charset=x-user-defined");
  req.send(null);
  return req.status === 200 ? req.responseText : "";
}

Phép thuật xảy ra trong dòng 5, ghi đè loại MIME, buộc trình duyệt phải coi nó là văn bản thuần túy, sử dụng bộ ký tự do người dùng định nghĩa. Điều này nói với trình duyệt không phân tích nó, và để cho các byte đi qua chưa được xử lý.

const filestream = loadBinaryResource(url);
const abyte = filestream.charCodeAt(x) & 0xff; // throw away high-order byte (f7)

Ví dụ trên tìm nạp byte tại Offset

function loadBinaryResource(url) {
  const req = new XMLHttpRequest();
  req.open("GET", url, false);

  // XHR binary charset opt by Marcus Granado 2006 [http://mgran.blogspot.com]
  req.overrideMimeType("text/plain; charset=x-user-defined");
  req.send(null);
  return req.status === 200 ? req.responseText : "";
}
3 trong dữ liệu nhị phân được tải. Phạm vi hợp lệ cho
function loadBinaryResource(url) {
  const req = new XMLHttpRequest();
  req.open("GET", url, false);

  // XHR binary charset opt by Marcus Granado 2006 [http://mgran.blogspot.com]
  req.overrideMimeType("text/plain; charset=x-user-defined");
  req.send(null);
  return req.status === 200 ? req.responseText : "";
}
3 là từ 0 đến
function loadBinaryResource(url) {
  const req = new XMLHttpRequest();
  req.open("GET", url, false);

  // XHR binary charset opt by Marcus Granado 2006 [http://mgran.blogspot.com]
  req.overrideMimeType("text/plain; charset=x-user-defined");
  req.send(null);
  return req.status === 200 ? req.responseText : "";
}
5.

Xem tải xuống các luồng nhị phân với xmlhttprequest để biết giải thích chi tiết. Xem thêm Tải xuống các tập tin.

Gửi dữ liệu nhị phân

Phương pháp

function loadBinaryResource(url) {
  const req = new XMLHttpRequest();
  req.open("GET", url, false);

  // XHR binary charset opt by Marcus Granado 2006 [http://mgran.blogspot.com]
  req.overrideMimeType("text/plain; charset=x-user-defined");
  req.send(null);
  return req.status === 200 ? req.responseText : "";
}
6 của XMLHTTPREQUEST đã được mở rộng để cho phép truyền dữ liệu nhị phân dễ dàng bằng cách chấp nhận đối tượng
const req = new XMLHttpRequest();
req.open("GET", "/myfile.png", true);
req.responseType = "blob";

req.onload = (event) => {
  const blob = req.response;
  // ...
};

oReq.send();
4,
const req = new XMLHttpRequest();
req.open("GET", "/myfile.png", true);
req.responseType = "blob";

req.onload = (event) => {
  const blob = req.response;
  // ...
};

oReq.send();
5 hoặc
function loadBinaryResource(url) {
  const req = new XMLHttpRequest();
  req.open("GET", url, false);

  // XHR binary charset opt by Marcus Granado 2006 [http://mgran.blogspot.com]
  req.overrideMimeType("text/plain; charset=x-user-defined");
  req.send(null);
  return req.status === 200 ? req.responseText : "";
}
9.

Ví dụ sau đây tạo một tệp văn bản trên đường và sử dụng phương thức

const filestream = loadBinaryResource(url);
const abyte = filestream.charCodeAt(x) & 0xff; // throw away high-order byte (f7)
0 để gửi "tệp" đến máy chủ. Ví dụ này sử dụng văn bản thuần túy, nhưng bạn có thể tưởng tượng dữ liệu là một tệp nhị phân thay thế.

const req = new XMLHttpRequest();
req.open("POST", url, true);
req.onload = (event) => {
  // Uploaded
};

const blob = new Blob(["abc123"], { type: "text/plain" });

req.send(blob);

Gửi các mảng được đánh máy dưới dạng dữ liệu nhị phân

Bạn cũng có thể gửi các mảng được đánh máy JavaScript dưới dạng dữ liệu nhị phân.

// Create a new array with fake data (Consecutive numbers (0 - 255), looping back to 0)
const array = new Uint8Array(512).map((v, i) => i);

const xhr = new XMLHttpRequest();
xhr.open("POST", url, false);
xhr.send(array);

Đây là xây dựng một mảng 512 byte của số nguyên 8 bit và gửi nó; Tất nhiên, bạn có thể sử dụng bất kỳ dữ liệu nhị phân nào bạn muốn.

Gửi biểu mẫu và tải lên các tệp

Xin vui lòng, đọc đoạn này.

JavaScript xử lý dữ liệu nhị phân như thế nào?

JavaScript có thể xử lý dữ liệu nhị phân thông qua các mảng được đánh máy. Và đây là một thư viện để xử lý các tệp nhị phân, mà bạn có thể sử dụng làm điểm tham chiếu cho ứng dụng của mình.via typed arrays. And here is a library for dealing with binary files, that you can use as a reference point for your application.

Chúng ta có thể gửi dữ liệu nhị phân trong JSON không?

Vì JSON chỉ hỗ trợ văn bản, vì vậy chúng tôi phải chuyển đổi tệp nhị phân (pdf, hình ảnh, v.v.) thành một chuỗi. Và sau đó chúng ta có thể dễ dàng thêm nó vào trường JSON. Ví dụ về mã: Trong ví dụ của tôi, tôi đang sử dụng Java cho đầu máy chủ nhưng bạn có thể sử dụng các công cụ và ngôn ngữ của riêng mình, lý thuyết sẽ vẫn giữ nguyên.json only supports text so we have to convert binary file (pdf, image etc) in to a string. And then we can easily add it to a json field. Code Example: In my example I am using java for server end but you can use your own tools and languages, Theory will remain same.

Bạn có thể gửi dữ liệu nhị phân qua HTTP không?

Chúng tôi có thể sử dụng giao thức đa dạng/dữ liệu ở trên để chuyển dữ liệu nhị phân thông qua các dịch vụ HTTP.Chúng ta có thể gửi dữ liệu ở định dạng trên với một số chuỗi ranh giới duy nhất có thể dễ dàng phân tích cú pháp ở phía máy khách.. We can send the data in above format with some unique boundary string which can be easily parsed at client side.

ReadasbinaryString là gì?

ReadAsbinaryString () Phương thức ReadAsbinaryString được sử dụng để bắt đầu đọc nội dung của blob hoặc tệp được chỉ định.Khi hoạt động đọc kết thúc, ReadyState sẽ hoàn thành và người làm phim.loadend_event được kích hoạt.Vào thời điểm đó, thuộc tính kết quả chứa dữ liệu nhị phân thô từ tệp.used to start reading the contents of the specified Blob or File . When the read operation is finished, the readyState becomes DONE , and the FileReader. loadend_event is triggered. At that time, the result attribute contains the raw binary data from the file.