HTML5 Learning Series (iv) file operations API

Original: HTML5 Learning Series (iv) file operations API

Introduction

Before we were working on local files using technologies such as flash, Silverlight, or third-party ActiveX plug-ins, it was difficult to achieve uniform performance across platforms, or across browsers, across devices, and so on, by using these technologies. From another point of view, our Web application relies on third-party plugins rather than being independent and generic enough. In the HTML5 standard, the API for manipulating files is provided by default to standardize this directly. With the action file API, so that our web application can easily through JS to control the file read, write, folder, file, and so on a series of operations, so that the Web application is no longer so lame, and before the Web application without the use of third-party plug-ins, it is a shit! But most of the latest standards of the browser has implemented the file read API, file writing, files and folders of the latest standard has just been developed, I believe that with the browser upgrade these features will certainly achieve very good, next I mainly introduce the file read several APIs.

A few important JS objects

1): FileList object
It is a collection of file objects, in the HTML4 standard, the Files upload control only accepts one file, and in the new standard, only need to set multiple, support multi-file upload, so the files property obtained from this tag is FileList object instance. Demo:<input type= "File" multiple= "multiple" name= "Filedemo" id= "Filedemo"/>; The following is a prototype of the API for FileList objects:

interface FileList {      getter Filelong  index);       Long length;};

2) Blob Object

is actually a raw data object that provides the slice method to read a block of data from the original data. There are also two properties: size (the amount of data), type (MIME type of data); Look at the following is the API prototype:

    interface Blob {            longlong  size;      readonly attribute domstring type;             // Slice Blob into byte-ranged chunks    Long Long                 ,long Long end,                              optional domstring contentType);         };

3) File Object
Inherits from the Blob object, pointing to a specific file, and it has two properties: name (filename), lastmodifieddate (last modified), and then let's look at some of the standards:

Interface File:blob {          readonly attribute domstring name;          readonly attribute Date lastmodifieddate; };

4) FileReader Object
Designed to read the data inside the file, providing three commonly used methods of reading file data, in addition to read the file data using an asynchronous way, very efficient. Then let's look at some of the standards:

[Constructor] interface Filereader:eventtarget {//Async Read Methods      voidReadasarraybuffer (blob blob); voidreadasbinarystring (blob blob); voidReadastext (blob blob, optional domstring encoding); voidReadasdataurl (blob blob); voidabort (); //statesConst unsigned ShortEMPTY = 0; Const unsigned ShortLOADING = 1; Const unsigned ShortDone = 2; ReadOnly attribute unsigned ShortreadyState; //File or Blob datareadonly attribute any result;      ReadOnly attribute Domerror error; //event handler Attributesattribute [Treatnoncallableasnull] Function?Onloadstart; attribute [Treatnoncallableasnull] Function?onprogress; attribute [Treatnoncallableasnull] Function?onload; attribute [Treatnoncallableasnull] Function?onabort; attribute [Treatnoncallableasnull] Function?onerror; attribute [Treatnoncallableasnull] Function?Onloadend; };

This object is very important the first object, which provides four ways to read the file data, all of which are asynchronously read data, and then directly put the result into the attribute result in the successful reading. So the general is to read the data directly, and then listen to the onload event of this object, and then read the result property in the event, and then do the subsequent processing. Of course, abort is the way to stop reading. The other is that events and states are no longer mentioned.

Three methods are introduced:

readasbinarystring (blob blob); → passes in a BLOB object and then reads the result of the data as a binary string into the filereader result property.

Readastext (blob blob, optional domstring encoding); → The first parameter is passed into the blog object, and then the second parameter is passed into the encoding format, and the data is read successfully into the result property, and the content read is in the form of a normal text string.

Readasdataurl (blob blob); → pass in a Blob object, read content can be as a URL attribute, that is, you can point the result of a picture to an img src attribute.

Read the files in the file upload control and present the content in a different way to the browser instance

Before displaying the code, before we manipulate a picture file, we first upload the image to the server, then use an IMG tag to point to the server URL address, and then a third-party plug-in for the image processing, and now all this does not need the server side, Because the FileReader object provides a few ways to read the file becomes unusually simple, and is not the client JS operation. And look at the following demo:

Case one: Get the file name of the uploaded file (online demo address)

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
Case two: Read the contents of the uploaded file, and then read the contents of the file directly to the browser (online demo address)
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
Summarize
With the file operation of the API, so that JS further operation of the local file has been enhanced, HTML5 for the client Web applications to get further functionality, HTML5 trend to make the web more client-side, and these need to make our HTML or JS become more powerful, And HTML5 is just in time to launch the file api!
HTML5 Learning Series (iv) file operations API