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. Blob objects can be used in all situations. You can use the file object; you 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 a Blob object can be used.

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

// HTML 代码如下
// <input id="fileItem" type="file">
var file = document.getElementById(&#39;fileItem&#39;).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 properties 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

The File object has 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 // 1517414400000
myFile.name // "file.bin"
myFile.size // 0
myFile.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().

Expanded 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 objects:
  lastModified - The timestamp of the last modification (integer date).

The second type, input tag

More commonly, we start from

< ;input type="file">Or drag and drop or other browser interface to get the file. 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, appended:

name - file name,
lastModified - the last time Modified timestamp.

This is how we get the

File object from :

<input type="file" onchange="showFile(this)"><script>function showFile(input) {
  let file = input.files[0];

  alert(`File name: ${file.name}`); // 例如 my.png
  alert(`Last modified: ${file.lastModified}`); // 例如 1552830408824}</script>

Details:
Please note:

Input (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].

【Related recommendations:

javascript video tutorial, web front-end】

The above is the detailed content of Is there a file object in javascript?. For more information, please follow other related articles on the PHP Chinese website!