How to read files in JS

We don’t know how to read files on the browser in JavaScript. I will share it with you in detail in the article. I hope it will be helpful to everyone.

Because the Web API in JavaScript has a new method File API, it is more convenient for us to read files and process data on the browser without using a back-end server.

FileReader reads data from a file and stores it in a JavaScript variable. It has the same meaning as XMLHttpRequest. They both load data from an external resource and the reading operation is asynchronous. This advantage is not Make the browser clogged. There are various methods for reading operations, such as the following methods

(1) readAsText() – returns the file content in the form of plain text

The The readAsText() method can be used to read text files. This method has two parameters. The first parameter is the File or Blob object to be read. The second parameter is used to specify the encoding of the file. The second parameter is optional. If not specified, UTF-8 defaults to the encoding. In the settings, you need to set an event listener after the file is loaded. When the onload event is called, we can check the content of the file obtained by the result attribute FileReader.

<input type="file" id="file" />
	<script type="text/javascript">
var file=document.getElementById("file");
var reader = new FileReader();
reader.onload=function(e){
	var text=reader.result;
}
reader.readAsText(file);
</script>

(2) readAsArrayBuffer() method

This method will read a Blob or a File object and generate an ArrayBuffer . When the read operation is completed, readyState changes to done (completed), and the loadend event is triggered. At the same time, the result attribute will contain an ArrayBuffer object to represent the data of the read file. ArrayBuffer is a fixed-length binary data buffer. When operating files, such as converting JPEG images to PNG

<script type="text/javascript">
var file=document.getElementById("file");
var reader = new FileReader();
reader.onload=function(e){
	var readAsArrayBuffer=reader.result;
}
reader.readAsArrayBuffer(file);
</script>

(3) readAsDataURL() returns the file content in the form of data URL

This method accepts a File or Blob to generate a data URL, which is basically a base64 encoded string of file data. This data URL can be used to set things like src image attributes

<script type="text/javascript">
var file=document.getElementById("file");
var reader = new FileReader();
reader.onload=function(e){
	 var dataURL = reader.result;
}
reader.readAsDataURL(file);
</script>

When using the above three methods, you must listen to the load event before starting to read, and event.target.result returns the result of reading.

Summary: The above is all the content of this article, I hope it will be helpful to everyone's study.

The above is the detailed content of How to read files in JS. For more information, please follow other related articles on the PHP Chinese website!