In my previous blog, I introduced how to use files in JavaScript, focusing specifically on how to obtain the File object. Only when the user uploads the file by uploading or dragging and dropping, these objects have the metadata of the file. Once you have these files, the next step is to read the data from these files.
The FileReader type has a single job, which is to read data from a file and store it in a JavaScriptvariable. Its API is intentionally designed to be the same as XMLHttpRequest, because they both load data from an external resource (outside the browser). Read operations are asynchronous so they don't clog the browser.
FileReader can create a variety of formats to represent file data, and the format returned when reading a file is required. Reading operations are completed by calling any of the following methods:
readAsText() – Returns the file content in plain text
readAsBinaryString() – Returns the file content in the form of encrypted binary dataString (This method is deprecated, please use readAsArrayBuffer() instead)
readAsArrayBuffer() – Use the form of ArrayBuffer to return the file content (useful for binary data such as image files)
readAsDataURL() – Use the form of data URL to return the file content
Just like the send method of the XHR object initiates an HTTP request, each of the above methods initiates a file reading. At this point, before starting to read, you must listen to the load event, event.target.result always returns the result of the read. For example:
1 2 3 4 5 6 7 8 9 10 11 |
|
In this example, we simply read the file content and output the content to the console as plain text. The onload operation is called when the file is successfully read, and the onerror operation is called when it cannot be read for some reason. The FileReader instance can be obtained through event.target in the event handler, and it is recommended to use it this way instead of using the reader variable directly. The result attribute contains the file content when the read is successful and the error message when the read fails.
Read data URI You can use a similar method to read the file as a data URI. The data URI (sometimes also called the data URL) is an interesting option, for example, if you want to To display an image file read from disk, you can do so with the following code:1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
|
<canvas<a href="//m.sbmmt.com/code/7892.html" target="_blank">></a>:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
|
[1] was originally introduced as part of WebGL. An Arraybuffer represents a limited number of bytes and can be used to store numbers of any size. The way to read an ArrayBuffer data requires a specific view. For example, Int8Array processes the bytes into a signed 8-bit integer set, while Float32Array processes the bytes into a 32-bit floating point number. Collection of . These are called types Array[2], which forces you to work with a specific numeric type, rather than containing data of any type (like a traditional array).
When processing binary files, you can use ArrayBuffer first, so that you can have more fine-grained control over the data. It's beyond the scope of this blog to explain all the ins and outs of ArrayBuffer, just know that you can easily read a file into an ArrayBuffer when you need to. You can pass an ArrayBuffer directly to the send() method of an XHR object, sending the original data to the server (you will read this data in the server request to reconstruct the file), as long as your browser Fully supports XMLHttpRequest Level 2[3] (supported by most of the latest browsers, including IE10 and Opera12).
The above is the detailed content of JavaScript file processing part 2 - sample code sharing for file reading. For more information, please follow other related articles on the PHP Chinese website!