HTML5 file API,

HTML5 file API,

The problem is simple,Create a page for uploading files.

<! -- Multiple indicates that multiple files can be uploaded --> <input type = "file" id = "file" multiple/> <input type = "button" id = "btn" value =" upload "/>

In the html page, two lines of code are used to complete the basic file upload page. For example. Solution.

*********** *********/

At this time, another new problem arises:How can I obtain the file name, file size, and file type of the File Uploaded by the user?

Var btn = document. getElementById ("btn"), file = document. getElementById ("file"), fileSize = document. getElementById ("fileSize"), fileType = document. getElementById ("fileType"); btn. onclick = function () {fileSize. innerHTML = file. files [0]. size; // files is an array that indicates the first file. FileType. innerHTML = file. files [0]. type; // obtain the file name as file. files [0]. type };

The result is as follows. Solution

This file is an array of file sets. It contains four objects:

• Name: the file name.
• Size: the size of the file in bytes. Note that it is a byte. [1kb = 1024b (byte), 1b = 8bit (BIT), 1 Mb = 1024kb]
• Type: file type. (Text/html, image/png)
• LastModifiedDate: string, the last time the file was modified. (Currently only supports Chrome)

*********** ****************/

At this time, a new problem arises,The user uploads an image and wants to preview it?

Here we introduce a new type of FileReader. Similar to XMLHttpRequest.

There are 5 objects in this type, which are

ReadAsText (file, encoding ):Text)Read the file and save the read text in the result attribute. The second parameter is used to specify the encoding type, which is optional.

ReadAsDataURL (file): Read the file and save the file as a data URI (image) in the result attribute.

ReadAsBinaryString (file): Read the file and save a string in the result attribute. Each character in the string represents one byte.

ReadAsArrayBuffer (file): Read the file and save an ArrayBuffer containing the file content in the result attribute.

Abort (): interrupt File Reading

There are also 6 methods:

Onabort interrupt trigger
Onerror trigger
Onprogress read is triggered
Triggered when onload is successfully read
Onloadend is triggered after failure or success

Return to the question.

Var btn = document. getElementById ("btn"), file = document. getElementById ("file"), fileSize = document. getElementById ("fileSize"), fileType = document. getElementById ("fileType"), show = document. getElementById ("show"); btn. onclick = function () {// fileSize. innerHTML = file. files [0]. size; // fileType. innerHTML = file. files [0]. type; var reader = new FileReader (); // a new object is first created. Reader. readAsDataURL (file. files [0]); // an important step is to obtain the image content. The image content is saved in reader. reader in result. onload = function () {show. innerHTML = ''; // page display }};

　　

<! -- Multiple indicates that multiple files can be uploaded --> <input type = "file" id = "file" multiple/> <input type = "button" id = "btn" value =" upload "/> <br/> <! -- <Span> file size: </span> <span id = "fileSize"> </span> <br/> <span> file type: </span> <span id = "fileType"> </span> <br/> --> <div id = "show"> </div>

 

Really nice.

Similarly, you can also read text and n-base files ..