Shulou(Shulou.com)06/02 Report--

This article mainly explains "how to use Javascript File and Blob". Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Let's let the editor learn how to use Javascript File and Blob.

File ()

The File () constructor creates a new instance of the File object.

Syntax var myFile = new File (bits, name [, options]); parameters

Bits

An Array that contains ArrayBuffer,ArrayBufferView,Blob, or DOMString objects-or any combination of these objects. This is the content of the file encoded by UTF-8.

Name

USVString, which represents the file name, or file path.

Options optional

An option object that contains the optional properties of the file. The available options are as follows:

Type: DOMString, which represents the MIME type of the content to be placed in the file. The default value is "".

LastModified: a numeric value that represents the Unix timestamp (in milliseconds) of the last modification time of the file. The default is Date.now ().

Example var file = new File (["my name"], "infoTxt", {type: "text/plain",}); Blob ()

The Blob object represents an immutable class file object with raw data. Its data can be read in text or binary format, or it can be converted to ReadableStream for data manipulation.

Blob does not necessarily represent data in the native format of JavaScript. The File interface is based on Blob, inherits the function of blob and extends it to support files on the user's system, while the API of the Blob object is also listed in the File interface.

To construct a Blob from other non-blob objects and data, use the Blob () constructor. To create a subset of blob data, blob, use the slice () method. To get the Blob object corresponding to the file on the user's file system, refer to the File documentation.

Syntax var aBlob = new Blob (array, options)

Returns a newly created Blob object whose contents consist of concatenated arrays given in the parameters.

Parameters.

Array is an Array made up of ArrayBuffer, ArrayBufferView, Blob, DOMString, etc., or a mixture of other similar objects, which will be put into Blob. DOMStrings will be encoded as UTF-8.

Options is an optional BlobPropertyBag dictionary that may specify the following two attributes:

Type, which defaults to "", represents the MIME type of the contents of the array that will be put into blob.

Endings, which defaults to "transparent", is used to specify how the string containing the line Terminator\ nis written. It is one of the following two values: "native", which means that the line Terminator will be changed to a newline character that is appropriate for the host operating system file system, or "transparent", which means that the Terminator saved in blob will remain unchanged.

Attribute

Blob.size read-only

The size, in bytes, of the data contained in the Blob object.

Blob.type read-only

A string indicating the MIME type of the data contained in the Blob object. If the type is unknown, the value is an empty string.

Method Blob.slice ([start [, end [, contentType])

Returns a new Blob object that contains data within the specified range in the source Blob object.

Blob.stream ()

Returns a ReadableStream that can read the contents of blob.

Blob.text ()

Returns a promise that contains all the contents of the blob USVString in UTF-8 format.

Blob.arrayBuffer ()

Returns an ArrayBuffer in binary format that contains all the contents of promise and blob

Example const aFileParts = ['heyweights']; / / an array containing DOMString const oMyBlob = new Blob (aFileParts, {type: 'text/html'}); / / get bloboMyBlob.size / / 32oMyBlob.type / /' text/html'

The Blob () constructor allows you to create Blob objects from other objects. For example, build a blob out of a string:

Var debug = {hello: "world"}; var blob = new Blob ([JSON.stringify (debug, null, 2)], {type: 'application/json'})

Use Blob to create a URL that points to a typed array

Const imgBlob = fetchedImgData (); / / set the returned responseType to blobconst blob = new Blob ([imgBlob], {type: 'image/png'}); / / pass in an appropriate MIME type const url = URL.createObjectURL (blob) / / it produces a URL string like blob:d3958f5c-0777-0845-9dcf-2cb28783acaf / / you can use it like a normal URL, such as on img.src.

Extract data from Blob

One way to read content from Blob is to use FileReader. The following code reads the contents of Blob as an array of types:

Const reader = new FileReader (); reader.readAsArrayBuffer (blob); reader.addEventListener ("load", function (readRes) {/ / readRes.target.result converted to arrayBuffer blob})

Another way to read content in Blob is to use the Response object. The following code reads the contents of the Blob as text:

Var text = await new Response (blob). Text ()

Blob can be read as a string or data URL by using other methods of FileReader.

At this point, I believe you have a deeper understanding of "how to use Javascript File and Blob". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.