This is the sixth day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

The File object

The File object represents a File and is used to read and write File information. It inherits Blob objects, or a special kind of Blob object, and can be used anywhere a Blob object can be used.

The most common use is in the form file upload control (). After the user selects a file, the browser generates an array of each selected file, which is a File instance object.

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

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

The constructor

Browsers natively provide a File() constructor that generates File instance objects.

new File(array, name [, options])
Copy the code

The File() constructor takes three arguments.

  • Array: An array whose members can be binary objects or strings representing the contents of a file.
  • Name: indicates the file name or file path.
  • Options: Configures objects and sets instance properties. This parameter is optional.

The third parameter configures the object, which can set two properties.

  • Type: a string representing the MIME type of the instance object. The default value is an empty string.
  • LastModified: timestamp indicating when the last modification was made. The default isDate.now().

Instance properties and instance methods

The File object has the following instance properties.

  • File.lastModified: time when the File was lastModified
  • File.name: indicates the File name or File path
  • File.size: File size (in bytes)
  • File.type: indicates the MIME type of a File

The FileList object

A FileList object is an array-like object that represents a list of selected files. Each member is an instance of File. It appears mainly on two occasions.

  • File control node (<input type="file">)filesProperty that returns a FileList instance.
  • Drag a group of files in the target areaDataTransfer.filesProperty that returns a FileList instance.
// The HTML code is as follows<input id="input" type="file">
var files = document.getElementById('input').files;
files instanceof FileList // true
Copy the code

In the above code, the files property of the file control is a FileList instance.

The main instance property of a FileList is length, which indicates how many files are contained.

The FileList instance method is primarily item(), which returns an instance of a specified position. It takes an integer as an argument, representing the ordinal number of the position (starting from zero). However, since an instance of a FileList is an array-like object, you can use the square bracket operator directly, i.e. myFileList[0] is the same as myfilelist.item (0), so the item() method is not normally used.

FileReader object

The FileReader object is used to read the contents of a File contained in a File object or Blob object.

Browsers natively provide a FileReader constructor that generates instances of FileReader.

var reader = new FileReader();
Copy the code

FileReader has the following instance attributes.

  • Filereader. error: Error object generated when reading a file
  • Filereader. readyState: an integer that indicates the current state of the file when it is read. There are three possible states,0Indicates that no data has been loaded,1Indicates that data is being loaded,2Indicates that the load is complete.
  • Filereader. result: The content of the file after reading, which can be a string or an ArrayBuffer instance.
  • FileReader. Onabort:abortA listener function for the event (the user terminates the read operation).
  • FileReader. Onerror:errorEvent (read error) listener function.
  • FileReader. Onload:loadA listener function for the event (read completion), usually used in this functionresultProperty, get the file contents.
  • FileReader. Onloadstart:loadstartA listener function for the event (read operation begins).
  • FileReader. Onloadend:loadendA listener function for the event (end of read operation).
  • FileReader. Onprogress:progressListener function for the event (read operation in progress).

FileReader has the following instance methods:

  • Filereader.abort () : Abort read operations,readyStateThe property will become2.
  • FileReader. ReadAsArrayBuffer () : read in the ArrayBuffer format file, read after completionresultProperty returns an ArrayBuffer instance.
  • After the completion of the FileReader. ReadAsBinaryString () : read,resultProperty returns the original binary string.
  • Filereader.readasdataurl () : After reading,resultProperty returns a string in Data URL format (Base64 encoded) representing the file content. For image files, this string can be used<img>Elements of thesrcProperties. Note that this string cannot be Base64 decoded directly and must be prefixeddata:*/*; base64,Delete from the string before decoding.
  • Filereader.readastext () : After reading,resultProperty returns a text string for the file content. The first argument to this method is a Blob instance representing the file, and the second argument, optional, represents the text encoding, which defaults to UTF-8.