Image preview of HTML5 file API

Image uploading is a very common function in today's Web applications. If you do not need to preview images before uploading, you can simply use HTML + Javascript to implement the function, however, if you must provide the image preview function before uploading, you need to turn to Flash for help. However, with the advent of the HTML5 File API, this article will introduce how to use the HTML5 File API to quickly implement the image preview function.

Browser support

The functions implemented in this article have been tested in the following browsers: IE8, Firefox3.6, Chrome6.0, Opera10, and Safari4. Among them, Firefox3.6 and Chrome6.0 have implemented this standard (although not fully compliant with the standard), and none of other browsers have implemented this standard. For specific compatibility issues, I will describe them in detail later.

File selection and Retrieval

Currently, the most common method for selecting files is to use the File Input element. You can use this element to open the local File dialog box to find and select the corresponding File, however, with the advent of HTML5 Drag Drop API, a new method is added-users can Drag local files directly to Web pages.

Method 1 <input type = "file">

<Input id = "fileSel" type = "file" onchange = "handleFiles (this. files)">
<Script type = "text/javascript">

// Obtain the selected file

Function handleFiles (files ){

// Print and process files

}

</Script>

<Input id = "fileSel" type = "file" onchange = "handleFiles (this. files)">
<Script type = "text/javascript">

// Obtain the selected file

Function handleFiles (files ){

// Print and process files

}

</Script>

Method 2 Drag & Drop

<Div id = "fileDropRegion"> drag the file here </div>
<Script type = "text/javascript">

// Obtain the selected file

Var dr = document. getElementById ('filedropregion ');

Dr. addEventListener ("drop", function (e ){
E. stopPropagation ();
E. preventDefault ();

Var dt = e. dataTransfer;

// Obtain the file Array
Var files = dt. files;
HandleFiles (files );
}, False );

Function handleFiles (files ){

// Print and process files

}

</Script>

<Div id = "fileDropRegion"> drag the file here </div>
<Script type = "text/javascript">

// Obtain the selected file

Var dr = document. getElementById ('filedropregion ');

Dr. addEventListener ("drop", function (e ){
E. stopPropagation ();
E. preventDefault ();

Var dt = e. dataTransfer;

// Obtain the file Array
Var files = dt. files;
HandleFiles (files );
}, False );

Function handleFiles (files ){

// Print and process files

}

</Script>

File Reading and display

Through the above method, we can get the array of the selected files. Next, we will operate on each File. As described in the HTML5 File API, each File object should contain the following attributes:

Readonly attribute DOMString name; // The name of the file.

Readonly attribute unsigned long size; // Represents the size of the Blob object in bytes.

Readonly attribute DOMString type; // The media type of the Blob

Readonly attribute DOMString url; // The URL representing the Blob object.

If you want to upload an image, you can use the type attribute to filter the image format and use the size attribute to control the image size. The implementation of Firefox and Chrome is surprisingly consistent with that of these attributes, and only the attributes name, size, and type are supported.

• 2 pages in total:
• Previous Page
• 1
• 2
• Next Page