The use of the FileReader of HTML5

Source: Internet
Author: User

Transferred from: http://blog.csdn.net/yaoyuan_difang/article/details/38582697

HTML5 defines FileReader as an important member of the file API for reading files, and the FileReader interface provides a way to read the file and an event model that contains the read result, according to the definition of the system.

FileReader is very simple to use, you can create a FileReader object and invoke its methods as follows:

1. Detection of browser support for FileReader

if (window. FileReader) {      varnew  FileReader ();       // Add your code   here }  else  {      alert ("not supported by your browser!" );  }  

2. Methods for invoking FileReader objects

The FileReader instance has 4 methods, 3 of which are used to read the file and the other to interrupt the read. The following table lists these methods, along with their parameters and capabilities, and it is important to note that the method does not return read results regardless of the success or failure of the read , which is stored in the result property.

Method Name Parameters Description
Abort None Interrupt Read
Readasbinarystring File To read a file as a binary code
Readasdataurl File Read the file as Dataurl
Readastext file, [encoding] To read a file as text

Readastext: 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.
readasbinarystring: This method reads a file as a binary string, usually we pass it to the back end, and the backend can store the file through this string.
Readasdataurl: 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.

3. 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.

Events Description
Onabort Trigger on interrupt
OnError Triggered when an error occurs
OnLoad Trigger when file 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.

function () {      this. result;  

The following shows the use of FileReader with an upload image preview and a progress bar upload.

<script type= "Text/javascript" >functionShowpreview (source) {varFile = Source.files[0]; if(window. FileReader) {varFR =NewFileReader (); Fr.onloadend=function(e) {document.getElementById ("Portrait"). src =E.target.result;                  };              Fr.readasdataurl (file); }          }      </script> <input type= "file" name= "file" onchange= "Showpreview (This)"/> 

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 with the Type property

if (!/image\/\w+/. Test (File.type)) {      alert ("Make sure file is 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.

If you want to add a progress bar, you can use the progress tag of HTML 5, implemented by the following code.

<form>      <fieldset>          <legend> degree reading file:</legend>          <input type= "file" id= "file"/ >          <input type= "button" value= "Interrupt" id= "Abort"/>          <p>              <label> Read Progress:</label> <progress id= "Progress" value= "0" max= "></progress>          </p>          <p id=" Status "></p >      </fieldset>  
1 varh = {  2Init:function() {  3         varme = This; 4            5document.getElementById (' File '). onchange =Me.filehandler; 6document.getElementById (' Abort '). onclick =Me.aborthandler; 7            8Me.status = document.getElementById (' status '); 9me.progress = document.getElementById (' Progress ')); TenMe.percent = document.getElementById (' percent '));  One             Ame.loaded = 0;  -         //1M per read -Me.step = 1024 * 1024;  theMe.times = 0;  -     },   -Filehandler:function(e) { -         varme =h;  +             -         varFile = Me.file = This. files[0];  +             A         varReader = Me.reader =NewFileReader ();  at             -         //   -Me.total =file.size;  -             -Reader.onloadstart =Me.onloadstart;  -Reader.onprogress =me.onprogress;  inReader.onabort =Me.onabort;  -Reader.onerror =Me.onerror;  toReader.onload =Me.onload;  +Reader.onloadend =Me.onloadend;  -         //Read the first block theMe.readblob (file, 0);  *     },   $Onloadstart:function() {  Panax Notoginseng         varme =h;  -     },   theOnProgress:function(e) { +         varme =h;  A             theme.loaded + =e.loaded;  +         //Update progress bar -Me.progress.value = (me.loaded/me.total) * 100;  $     },   $Onabort:function() {   -         varme =h;  -     },   theOnError:function() {   -         varme =h; Wuyi             the     },   -OnLoad:function() {   Wu         varme =h;  -     About         if(Me.loaded <me.total) { $ Me.readblob (me.loaded);  -}Else {   -me.loaded =Me.total;  -         }   A     },   +Onloadend:function() {   the         varme =h;  -             $     },   theReadblob:function(start) { the         varme =h;  the             the         varBlob, -File =Me.file;  in             theMe.times + = 1;  the             About         if(file.webkitslice) { theBlob = File.webkitslice (start, start + Me.step + 1);  the}Else if(file.mozslice) { theBlob = File.mozslice (start, start + Me.step + 1);  +         }   -             the Me.reader.readAsText (BLOB); Bayi     },   theAborthandler:function() {   the         varme =h;  -             -         if(me.reader) { the Me.reader.abort ();  the         }   the     }   the };  -     theH.init ();

The use of the FileReader of HTML5

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.