This is the 13th day of my participation in the August More Text Challenge

What is the File

  1. The File interface provides information about a File and allows JavaScript in a web page to access its contents.

  2. In general, A File object is a FileList object returned by the user after selecting a File on a element (the files property of the element). It can also be a File from a DataTransfer object generated by a drag-and-drop operation. Or from the mozGetAsFile() API on HTMLCanvasElement.

  3. File.lastModified: returns the number of milliseconds since the start of UNIX time (00:00:00 UTC, January 1, 1970) when the File referenced by the current File object was lastModified. Read-only \

  4. File.lastModifiedDate: A Date object that returns the last modified time of the File referenced by the current File object. Read-only \

  5. File.name: Returns the name of the File referenced by the current File object. Read-only \

  6. File.size: Returns the size of the File. Read-only \

  7. File.webkitRelativePath: Returns the path or URL associated with File. Read-only \

  8. File.type: The multipurpose Internet Mail extension type (MIME Type) of the returned File. Read-only \

There are two ways to get files

The first:

Constructor creation

new File(fileParts, fileName, [options])
Copy the code
  • FileParts — an array of Blob/BufferSource/String values.
  • FileName – Indicates the name of the file.
  • Options — Optional objects:
  • LastModified – Timestamp of the last modification (integer date).

The second:

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 is inherited from Blob, the File object has the same properties, plus:

  • Name — file name,
  • LastModified – Timestamp of the last modification.

Example:

<input type="file" onchange="consoleFile(this)"> <script> function consoleFile(input) { let file = input.files[0]; alert(`File name: ${file.name}`); PNG alert(' Last Modified: ${file.lastModified} '); // for example 2020.20.20} </script>Copy the code

TIP: 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].

What is the FileReader

A FileReader is an object whose sole purpose is to read data from a Blob (and therefore from a File) object. Rather, a constructor that reads Blob objects to help us manipulate binaries.

let reader = new FileReader(); // No argumentsCopy the code

Main usage methods:

  1. ReadAsArrayBuffer (BLOB) — An ArrayBuffer that reads data in binary format.
  2. ReadAsText (blob, [encoding]) — reads the data as a text string in the given encoding (default utF-8 encoding).
  3. ReadAsDataURL (BLOB) — Reads binary data and encodes it as base64’s data URL.
  4. Abort () — Cancels the operation.

These methods have the following six declaration cycles to operate

  1. Loadstart — Starts loading.
  2. Progress – appears during the read process.
  3. Load — Reads complete without error.
  4. Abort — Abort () is called.
  5. Error — An error occurs.
  6. Loadend – The read completes, whether it succeeds or fails.

After the read is complete, we can obtain the read results in the following two ways

  1. Reader.result is the result (if successful)
  2. Reader. Error is error (if failed).

Example:

<input type="file" onchange="readFile(this)">
​
<script>
function readFile(input) {
  let file = input.files[0];
​
  let reader = new FileReader();
​
  reader.readAsText(file);
​
  reader.onload = function() {
    console.log(reader.result);
  };
​
  reader.onerror = function() {
    console.log(reader.error);
  };
​
}
</script>
Copy the code

Use FileReader to manipulate blobs

As we mentioned in the Blob chapter, FileReader reads not only files, but also any Blob. We can use it to convert bloBs to other formats:

  1. ReadAsArrayBuffer (BLOB) — Convert to ArrayBuffer,
  2. ReadAsText (blob, [encoding]) — Convert to a string (an alternative to TextDecoder),
  3. ReadAsDataURL (BLOB) — DataURL converted to Base64.