jeena/en.javascript.info
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

updates

Browse source
This commit is contained in:
Ilya Kantor 2019-07-03 17:19:00 +03:00
parent 94c83e9e50
commit cc5213b09e
79 changed files with 1341 additions and 357 deletions
Download patch file Download diff file Expand all files Collapse all files

30
4-binary/04-file/article.md
View file

@ -13,11 +13,15 @@ new File(fileParts, fileName, [options])
- **`fileParts`** -- is an array of Blob/BufferSource/String value, same as `Blob`.
- **`fileName`** -- file name string.
- **`options`** -- optional object:
- **`lastModified`** -- a timestamp (integer date) of last modification.
- **`lastModified`** -- the timestamp (integer date) of last modification.
Second, more often we get a file from `<input type="file">` or drag'n'drop or other browser interfaces. Then the file gets these from OS.
For instance:
As `File` inherits from `Blob`, it has same properties, plus:
- `name` -- the file name,
- `lastModified` -- the timestamp of last modification.
That's how we can get a `File` object from `<input type="file">`:
```html run
<input type="file" onchange="showFile(this)">
@ -50,11 +54,17 @@ let reader = new FileReader(); // no arguments
The main methods:
- **`readAsArrayBuffer(blob)`** -- read the data as `ArrayBuffer`
- **`readAsText(blob, [encoding])`** -- read the data as a string (encoding is `utf-8` by default)
- **`readAsDataURL(blob)`** -- encode the data as base64 data url.
- **`readAsArrayBuffer(blob)`** -- read the data in binary format `ArrayBuffer`.
- **`readAsText(blob, [encoding])`** -- read the data as a text string with the given encoding (`utf-8` by default).
- **`readAsDataURL(blob)`** -- read the binary data and encode it as base64 data url.
- **`abort()`** -- cancel the operation.
The choice of `read*` method depends on which format we prefer, how we're going to use the data.
- `readAsArrayBuffer` - for binary files, to do low-level binary operations. For high-level operations, like slicing, `File` inherits from `Blob`, so we can calll them directly, without reading.
- `readAsText` - for text files, when we'd like to get a string.
- `readAsDataURL` -- when we'd like to use this data in `src` for `img` or another tag. There's an alternative to reading a file for that, as discussed in chapter <info:blob>: `URL.createObjectURL(file)`.
As the reading proceeds, there are events:
- `loadstart` -- loading started.
- `progress` -- occurs during reading.
@ -95,16 +105,16 @@ function readFile(input) {
```
```smart header="`FileReader` for blobs"
As mentioned in the chapter <info:blob>, `FileReader` works for any blobs, not just files.
As mentioned in the chapter <info:blob>, `FileReader` can read not just files, but any blobs.
So we can use it to convert a blob to another format:
We can use it to convert a blob to another format:
- `readAsArrayBuffer(blob)` -- to `ArrayBuffer`,
- `readAsText(blob, [encoding])` -- to string (an alternative to `TextDecoder`),
- `readAsDataURL(blob)` -- to base64 data url.
```
```smart header="`FileReaderSync` is available for workers only"
```smart header="`FileReaderSync` is available inside Web Workers"
For Web Workers, there also exists a synchronous variant of `FileReader`, called [FileReaderSync](https://www.w3.org/TR/FileAPI/#FileReaderSync).
Its reading methods `read*` do not generate events, but rather return a result, as regular functions do.
@ -116,7 +126,7 @@ That's only inside a Web Worker though, because delays in synchronous calls, tha
`File` objects inherit from `Blob`.
In addition to `Blob` methods and properties, `File` objects also have `fileName` and `lastModified` properties, plus the internal ability to read from filesystem. We usually get `File` objects from user input, like `<input>` or drag'n'drop.
In addition to `Blob` methods and properties, `File` objects also have `name` and `lastModified` properties, plus the internal ability to read from filesystem. We usually get `File` objects from user input, like `<input>` or Drag'n'Drop events (`ondragend`).
`FileReader` objects can read from a file or a blob, in one of three formats:
- String (`readAsText`).
@ -125,4 +135,4 @@ In addition to `Blob` methods and properties, `File` objects also have `fileName
In many cases though, we don't have to read the file contents. Just as we did with blobs, we can create a short url with `URL.createObjectURL(file)` and assign it to `<a>` or `<img>`. This way the file can be downloaded or shown up as an image, as a part of canvas etc.
And if we're going to send a `File` over a network, that's also easy, as network API like `XMLHttpRequest` or `fetch` natively accepts `File` objects.
And if we're going to send a `File` over a network, that's also easy: network API like `XMLHttpRequest` or `fetch` natively accepts `File` objects.