HTML5 Learning Series (4) file operation API

ArticleDirectory

• Introduction
• Several important JS objects
• Read the files in the file upload control and display the content in different ways in the browser.

Introduction

Previously, we used flash, Silverlight, third-party ActiveX plug-ins and other technologies to operate local files, with these technologies, it is difficult to achieve unified performance across platforms, browsers, and devices, from another perspective, our web applications depend on third-party plug-ins, rather than being independent and not general enough. In the HTML5 standard, operations are provided by default.CompositionAPI of the component to standardize all of this. With the file operation API, our web applications can easily control a series of operations such as file reading, writing, folders, and files through Js, it makes Web applications no longer so lame. If Web applications did not use third-party plug-ins, it would be a shit! However, most of the latest standards have implemented the File Reading API, file writing, and the latest standards for files and folders, I believe that these functions will be implemented very well with the upgrade of the browser. Next I will introduce several APIs for file reading.

Several important JS objects

1): filelist object
It is a collection of file objects. In the html4 standard, the file upload control only accepts one file. In the new standard, you only need to set multiple to support Multifile upload, therefore, the files attribute obtained from this tag is the filelist object instance. Demo: <input type = "file" multiple = "multiple" name = "filedemo" id = "filedemo"/>. The following is a prototype of the filelist object API:

Interface filelist {getter File? Item (unsignedLongIndex); readonly attribute unsignedLongLength ;};
 

2) BLOB Object

It is actually a raw data object. It provides the Slice Method to read a piece of data from the raw data. There are two other attributes: size (data size) and type (Data MIME type). See the W3C API prototype below:

Interface blob {readonly attribute unsignedLong LongSize; readonly attribute domstring type;//Slice blob into byte-ranged chunksBlob slice (optionalLong LongStart, optionalLong LongEnd, optional domstring contenttype );};
 

3) file object
It inherits from the BLOB Object and points to a specific file. It has two attributes: Name (file name) and lastmodifieddate (last modification time). Then let's look at some W3C standards:

Interface file: blob {readonly attribute domstring name; readonly attribute date lastmodifieddate ;};
 

4) filereader object
It is designed to read data in files and provides three common methods to read file data. In addition, the asynchronous method is used to read file data, which is very efficient. Then let's look at some W3C standards:

 [Constructor] interface filereader: eventtarget {  //  Async read Methods        Void  Readasarraybuffer (BLOB );  Void  Readasbinarystring (BLOB );  Void  Readastext (BLOB blob, optional domstring encoding ); Void  Readasdataurl (BLOB );  Void  Abort ();  //  States Const unsigned Short Empty = 0 ; Const unsigned  Short Loading = 1 ; Const unsigned  Short Done = 2 ; Readonly attribute unsigned  Short Readystate;  //  File or BLOB Data  Readonly attribute any result; readonly attribute domerror error;  //  Event Handler attributes Attribute [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 the first important object. It provides four methods to read file data. These methods read data asynchronously. After successful reading, the result is directly put into the property result. Therefore, it is generally to directly read data, listen to the onload event of this object, read the result attribute in the event, and then perform subsequent processing. Of courseAbortIs the method to stop reading. The other is that the events and status are not described in detail.

The three methods are described as follows:

Readasbinarystring (BLOB );→ Input a blob object, and then read the data as a binary string.Filereader.

Readastext (BLOB blob, optional domstring encoding );→ The first parameter is passed into the blog object, and the second parameter is passed into the encoding format. After the data is successfully read asynchronously, it is placed in the result attribute. The read content is in the form of a common text string.

Readasdataurl (BLOB );→Input a blob object,The read content can be used as a URL attribute, that is, the result of an image can be directed to the src attribute of an IMG.

Read the files in the file upload control and display the content in different ways in the browser.

On displayCodePreviously, when we operated on an image file, we first uploaded the image to the server, and then directed it to the server URL using an IMG tag, then, you can use a third-party plug-in for image processing, and now this does not require the server side, because the filereader object provides several methods to read files, which becomes very simple, it is not a client JS operation. See the following demo:

case 1: Get the file name to be uploaded (Online Demo address)

<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <HTML xmlns = "http://www.w3.org/1999/xhtml"> 
 
 

 
Case 2: Read the content of the uploaded file and then directly read the file content 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"> <HTML xmlns = "http://www.w3.org/1999/xhtml"> 
 
 
Summary
 
With the file operation API, JS can be further enhanced to operate on local files, and HTML5 can further improve the client web application functions, HTML5 trends make the web more client-rich, and all of these need to make our HTML or JS more powerful, and HTML5 just launched the file API in a timely manner!