HTML5 FileReader File Read

This article refers to: http://blog.csdn.net/jackfrued/article/details/8967667

One: FileReader

FileReader is an important member of the API to read the file, the FileReader interface provides a way to read the file and an event model containing the results of the read event;

Two: The method of FileReader event

The FileReader instance has 4 methods, 3 of which are used to read the file and the other to interrupt the read

The 1:readasdataurl parameter file reads files as Dataurl

This is the method used in the example program, which reads a file as a string beginning with data: The essence of this string is that the data Url,data URL is a scheme to embed small files directly into the document. Small files here usually refer to files in the format of images and HTML.

2:readastext parameter file [encoding] reads files as text

The method has two parameters, where the second parameter is the encoding of the text, and the default value is UTF-8. This method is very easy to understand, the file is read in text mode, the result of reading is the content of this text file.

3:readasbinarystring parameter file reads files as binary code

The method reads the file as a binary string, which we typically pass to the backend, where the backend can store the file.

4:abort parameter None Interrupt read

Note: Regardless of the read success or failure, the method does not return the read result, which is stored in the result property.

Three: Handling Events

The FileReader contains a complete set of event models that capture the state of the file when it is read, and the following table summarizes these events.

• onabort　　中断时触发
• OnError triggered when an error occurs
• The onload file is triggered when the read completes successfully
• Onloadend Read completion trigger, regardless of success or failure
• Onloadstart trigger at start of Read
• OnProgress Read in

Once a file begins to read, the result property of the instance is populated, regardless of success or failure. If the read fails, the value of result is null, otherwise it is the result of the read, and the vast majority of programs will fetch the value when the file is successfully read.

Four: Example Application

1. Detection of browser support for FileReader

　　if (window. FileReader) {

var fr = new FileReader (); //Add your code here

} Else {

Alert ("not supported by your browser!");

}

2. If you want to limit the type of upload file, you can get the file object through the file selector and check the file type by the Type property (judging the picture file)

　　if (!/image\/\w+/.test (File.type)) {

Alert ("Make sure the file is of image type");   return false;

}

It is not difficult to find that this detection is based on regular expressions, so it is useful to have a variety of complex matches.

<div class= ' container ' >
<input type= "file" multiple id= "Selectfile"/>
<div class= ' Iconbox ' ></div>
</div>

<script type= "Text/javascript" >
Document.queryselector (' input[type=file] '). onchange = function () {

1 Creating a file read object instantiating a reader
var reader = new FileReader ();

0 Get the selected file information through the current file tag
Console.log (This.files);

2 Call the object's method to read the file file
Reading a file is a time-consuming operation, not necessarily when the read is complete
Reader.readasdataurl (This.files[0]);
Reader.readasdataurl (f);

3 Adding an event when the file is too large to read immediately through the event monitoring progress
Time-consuming operations are registered through events and callbacks
Reader.onload = function () {
Using files that have been read
Console.log (Reader.result);
Use the returned results to
Document.queryselector ('. Iconbox '). Style.background = ' url (' + reader.result+ ') no-repeat center/cover ';
}
}
</script>

HTML5 filereader File read