HTML5 File API Interpretation

1, overview

Web applications should have the ability to handle a wide range of user input issues, such as in web-rich applications where users want to upload files to the server. The file API defines the basic ways to access files, including files, file list sets, error handling, and so on, while the file API defines some metadata in the process of describing the asynchronous processing of files. Next, let's take a look at file application.

2,filelist interface

Interface Description:

1 interface FileList {2       Long index); 3       Long length; 4 };

Implemented by the FileList object, which represents a list of collections of uploaded files. As follows:

<input type= "File" multiple= "multiple" name= "file" id= "file"/>var fileList = document.forms[' FormName ' [' File '].files;

FileList has the following properties:    1,length: Indicates the length of the file list, that is, the number of files FileList The following method:    1,index (indexnum): Indexnum is the location of the file in the file list, starting from 0, Is the same as the normal array subscript, and returns null if it does not exist.

3,blob interface

Interface Description:

1 interface Blob {2       3ReadOnly attribute unsignedLong Longsize;4 readonly attribute domstring type;5       6       //Slice Blob into byte-ranged chunks7Blob Slice (optionalLong LongStart,8OptionalLong LongEnd,9 optional domstring contentType); Ten      One};

Implemented by the Bob object, which is a raw data object. As follows:

1 //Create A new Blob object2 3 varA =NewBlob ();4 5 //Create a 1024-byte ArrayBuffer6 //buffer could also come from reading a File7 8 varBuffer =NewArrayBuffer (1024);9 Ten //Create Arraybufferview objects based on buffer One  A varShorts =NewUint16array (buffer, 512, 128); - varbytes =NewUint8array (buffer, Shorts.byteoffset +shorts.bytelength); -  the varb =NewBlob (["foobarbazetcetc" + "Birdiebirdieboo"], {type: "Text/plain;charset=utf-8"}); -  - varc =NewBlob ([B, Shorts]); -  + varA =NewBlob ([B, C, bytes]); -  + varD =NewBlob ([buffer, B, c, bytes]);

Bolb has the following properties:

1,size: The size of the data

2,type: MIME type of data

Bolb has the following methods:

1,slice: Used to read a piece of data from the original data, see the example below for details

1 //obtain INPUT element through DOM2     3     varFile = document.getElementById (' file '). files[0];4     if(file)5     {6       //create an identical copy of file7       //The calls below is equivalent8       9       varFileclone =File.slice ();Ten       varFileClone2 = File.slice (0, file.size); One        A       //slice file into the chunk starting at middle of file -       //Note The use of negative number -        the       varFilechunkfromend = File.slice (-(Math.Round (FILE.SIZE/2))); -        -       //slice file into the chunk starting at beginning of file -        +       varFilechunkfromstart = File.slice (0, Math.Round (FILE.SIZE/2)); -        +       //slice file from beginning till bytes before end A        at       varFilenometadata = File.slice (0, -150, "Application/experimental");  -     }

4,file interface

Interface Description:

1 interface File:blob {2          readonly attribute domstring name; 3           readonly attribute Date lastmodifieddate; 4  };

Implemented by the file object, which inherits from the Blob object, pointing to a specific file.

File has the following properties:

1,name: Name of the file

2,lastmodifieddate: Last modified time for file

5,filereader interface

Interface Description:

1 interface Filereader:eventtarget {2 3       //Async Read Methods4       voidReadasarraybuffer (blob blob);5       voidreadasbinarystring (blob blob);6       voidReadastext (blob blob, optional domstring encoding);7       voidReadasdataurl (blob blob);8 9       voidabort ();Ten  One       //states AConst unsigned ShortEMPTY = 0; -Const unsigned ShortLOADING = 1; -Const unsigned ShortDone = 2; the  -  -ReadOnly attribute unsigned ShortreadyState; -  +       //File or Blob data - readonly attribute any result; +  A readonly attribute domerror error; at  -       //event handler Attributes -attribute [Treatnoncallableasnull] Function?Onloadstart; -attribute [Treatnoncallableasnull] Function?onprogress; -attribute [Treatnoncallableasnull] Function?onload; -attribute [Treatnoncallableasnull] Function?onabort; inattribute [Treatnoncallableasnull] Function?onerror; -attribute [Treatnoncallableasnull] Function?Onloadend; to  +};

Implemented by the FileReader object, which reads the data inside the file, provides three commonly used methods to read the file data, and also provides an asynchronous way to read the file data.

FileReader Property List:

Event List	Event description
Onloadstart	Trigger when file read starts
OnProgress	Timed trigger when the read is in progress. The event parameter contains the total amount of data that has been read.
Onabort	Triggered when the read is aborted.
OnError	triggered when a read error occurs.
OnLoad	Triggered when the read is completed successfully.
Onloadend	When the read is complete, either success or failure will trigger

List of FileReader methods:

Method List	Method description
Readasbinarystring ()	Reads the contents of the file, reading the result as a binary string. Each byte of a file is represented as an integer within a [0..255] interval. The function accepts a File object as a parameter.
Readastext ()	Reads the contents of a file, reading the result as a string of text representing the contents of the file. The function accepts a File object and a literal encoded name as a parameter.
Readasdataurl	Reads the contents of the file and reads the URL of the result as a data:. Dataurl defined by RFC2397

Reference Source: http://www.w3.org/TR/file-upload/

HTML5 File API Interpretation