Is there a file object in javascript?

There is a file object in JavaScript; the file object represents a file and is used to read and write file information. This object inherits the Blob object and extends the functions related to the file system. The file object can be used in all situations where a Blob object can be used; it can Use the "new File(fileParts, fileName, [options])" constructor to obtain the file object.

The operating environment of this tutorial: Windows 10 system, JavaScript version 1.8.5, Dell G3 computer.

There is a file object in javascript

File object

The File object represents a file and is used to read and write file information. It inherits the Blob object, or is a special Blob object, which can be used in all situations where the Blob object can be used.

The most common use case is the file upload control () of the form. After the user selects a file, the browser will generate an array containing each file selected by the user. They are all File instance objects.

// HTML code is as follows // <input id="fileItem" type="file">var file = document.getElementById('fileItem').files[0];file instanceof File // true

In the above code, file is the first file selected by the user, which is an instance of File.

Constructor

The browser natively provides a File() constructor to generate File instance objects.

new File(array, name [, options])

The File() constructor accepts three parameters.

Array: An array whose members can be binary objects or strings, representing the contents of the file.

name: String, representing the file name or file path.

options: Configuration object, set the attributes of the instance. This parameter is optional.

The third parameter configures the object and can set two properties.

type: String, indicating the MIME type of the instance object. The default value is an empty string.

lastModified: Timestamp, indicating the last modified time, the default is Date.now().

Below is an example.

var file = new File(['foo'], 'foo.txt', { type: 'text/plain', });

Instance properties and instance methods

File objects have the following instance properties.

File.lastModified: last modified time

File.name: file name or file path

File.size: file size (unit bytes)

File.type: MIME type of the file

var myFile = new File([], 'file.bin', { lastModified: new Date(2018, 1, 1),});myFile.lastModified // 1517414400000myFile.name // "file.bin"myFile.size / / 0myFile.type // ""

In the above code, since the content of myFile is empty and the MIME type is not set, the size attribute is equal to 0 and the type attribute is equal to the empty string.

The File object does not have its own instance method. Since it inherits the Blob object, you can use the Blob instance method slice().

Expand your knowledge:

There are two ways to obtain it.

The first one, similar to Blob, has a constructor:

new File(fileParts, fileName, [options])

fileParts - Array of Blob/BufferSource/String type values.

fileName - file name string.

options - optional object:

lastModified - The timestamp of the last modification (integer date).

The second type, input tag

More commonly, we get files from <input type="file"> or drag and drop or other browser interfaces. In this case, file will get this information from the operating system (OS).

Since File inherits from Blob, the File object has the same properties, plus:

name - file name, lastModified - the timestamp of the last modification.

This is how we get the File object from <input type="file">:

<input type="file" onchange="showFile(this)"><script>function showFile(input) { let file = input.files[0]; alert(`File name: ${file.name}`); // For example my.png alert(`Last modified: ${file.lastModified}`); // For example 1552830408824}</script>

Details: Please note:

Input can select multiple files, so input.files is an array-like object. Here we only have one file, so we just take input.files[0].