Web applications provide the ability to access files and, in turn, provide a set of apis to access file data.

Related file interface

  • ArrayBuffer: Represents a general-purpose, fixed-length buffer of raw binary data (the raw binary data inside cannot be manipulated)
  • Blob(Binary Large Object) : Represents raw binary data that cannot be changed and can be accessed in bytes
  • File: contains information properties of a File, including the File name and last modified time, and is itself a subclass of BLOB
  • FileList: an array of independent files selected for the underlying File system. That is, an array of File objects
  • FileReader: Provides methods to access file and blob objects and provides an event mechanism to obtain the results of read operations, asynchronously, without hindering UI rendering and JS execution.
  • URL scheme: Used for binary data, such as files, that can be accessed by reference (URL link) in Web applications

File operation process

Basic mode of file operation:

  1. The user accesses the file system using the input element interface to obtain the fileList file list consisting of file objects.
  2. File objects are accessed through fileReader objects, which provide methods and an event model to listen for file reads.
  3. The file object is based on Blob and can be converted to an Arraybuffer using the corresponding methods of Blob. It can also be converted to a URL reference and accessed by link
  4. The xhr.send() method supports blob and arrayBuffer formats, so a File object can be passed in as a send parameter to upload the file to the server

Introduction to Important Interfaces

  • Blob An immutable, raw data-like file object

    Unlike ArrayBuffer, which represents only binary data, BLOBs expose ways of processing binary data at a macro level

    1.Blob.text() a string mapped to UTF-8 (UTF-8 is an encoding specification equivalent to a mapping between numeric values and characters, where “8” represents at least one byte of encoding, compatible with ASCII encoding)

    2. blob.arrayBuffer () An arrayBuffer that converts binary data

  • fileReader Asynchronously reads the file or data referred to by a File or BLOb object

    The fileReader method provides more formatting options and flow control and better compatibility than blobs using their own methods to convert data into other formats

Dive into the binary world

As we all know, the computer is A binary world, and every character is just A mapping of binary numbers. For example, the ASCII code ‘A’ is represented in binary format: OB10000001, and the decimal values we see are also stored in binary mode.

Blob objects can handle binary data at a macro level (such as formatting and slice cutting) but not the actual binary data inside them (such as accessing and assigning), whereas an arrayBuffer represents raw, fixed binary data but cannot manipulate its contents. So what does an arrayBuffer do?

Javascript introduces the concept of typed arrays, which provide access to raw binary content. Typed arrays are array-like objects similar to NodeList, arguments, and so on. Typed arrays split the implementation of accessing binary into buffers and views for flexibility and extensibility. The buffer, an arrayBuffer, defines the storage space you want, and the view (TypedArray) provides access to the buffer.

The following is a breakdown of access to the buffer by typed arrays

Note: Typed array is the general name of a class of constructors whose names express the splitting rules of views in the buffer. For example, ’32’ in UInt32Array means that each element has 32bits (4bytes), so the buffer is divided into views in 4byte units

Let’s use typed arrays for simple binary access

Const buffer = new ArrayBuffer(32) console.log(buffer.bytelength) // 32 Const view = new Int32Array(buffer) const view = new Int32Array(buffer) // Access binary internal for (let index = 0; index < view.length; Index++) {view [index] = index + 1} / / and see what the console log (Array) prototype. Join. The call (the view, ' ')) / / 12345678Copy the code

This is a brief introduction to typed arrays, as described in the MDN documentation and ECMA specification