HTML5 implements an instance for accessing local files

Comments: Today, I will share with you a simple application to demonstrate how to use FileReader. FileReader is a file operation API provided in HTML5, for more information, see the previous articles. I shared several HTML5 examples: drag-and-drop demonstration, editable demonstration of page content, and local storage demonstration. Today, I will share with you a simple application to demonstrate how to use FileReader. FileReader is a file operation API provided in html5.

When you look at the HTML 5 example I wrote earlier, I am thinking about creating a simple but applicable example to demonstrate these HTML5 new features in a more novel way. My goal is not to simply present these HTML 5 APIs, but to use examples to tell developers how to implement them in a practical and innovative way.

In HTML5, accessing the local File system from a Web page is quite simple, that is, using the File API. This File specification provides an API to represent File objects in Web applications. You can select them through programming and access their information. This File API includes:
A FileList sequence represents an array composed of a single file selected in the local system. The user interface used to select files can be called through <input type = "file">.
A Blob interface, which represents the original binary data. You can access the byte data through the Blob Object.
A File Interface contains the read-only attribute information of a File, such as the File name, File type, and File data access address.
A FileReader interface that provides a method for reading a file and an event model for obtaining the File Read result.
A FileError interface and a FileException object are used to define the error generation conditions in this specification.
How to use this example: in this example, I provide a canvas. You can drag an image from the local file system, or you can use the file selection box to select an image. In this example, select only image files. I have not added file filtering and file type check. Remember that none of the browsers fully implement HTML5. This example needs to run on a browser that supports HTML5, such as Firefox3.5 or above.

The main method for implementing the File API is very simple, as shown below:

The Code is as follows:
Function imagesSelected (myFiles ){
For (var I = 0, f; f = myFiles [I]; I ++ ){
Var imageReader = new FileReader ();
ImageReader. onload = (function (aFile ){
Return function (e ){
Var span = document. createElement ('span ');
Span. innerHTML = ['']. join (");
Document. getElementById ('thumbs '). insertBefore (span, null );
};
}) (F );
ImageReader. readAsDataURL (f );
}
}
Function dropIt (e ){
ImagesSelected (e. dataTransfer. files );
E. stopPropagation ();
E. preventDefault ();
}

I chose to place my ondrop event on <td>:

The Code is as follows:
<Td align = "left" height = "105" ondragenter = "return false" ondragover = "return false" ondrop = "dropIt (event)">
<Output id = "thumbs"> </output>
</Td>

In this example, I drag a local file to the canvas. However, I think it can show you the simple but powerful File API capabilities.