Comment: Today, I will share with you a simple application to demonstrate the method of using FileReader. FileReader is a file operation API provided in HTML5. Friends who need it can learn about it.
In the previous articles, I have shared several HTML5 examples with you, namely the drag and drop function demonstration, the editable page content demonstration, and the local storage function demonstration. Today, I will share with you a simple application to demonstrate the method of using FileReader, a file operation API provided in HTML5.When you look at the HTML 5 examples I wrote earlier, I'm thinking about creating a simple but applicable example to drill these new HTML5 features in an even more bizarre way. My goal is not to simply show these HTML 5 APIs, but to use examples to tell developers how to truly implement these APIs in a practical and innovative way.
In HTML5, accessing the local file system from a web page becomes very simple, that is, using the File API. This File specification provides an API to represent file objects in a web application. You can select them and access their information through programming. This File API includes:
A FileList sequence represents an array of individual files selected in the local system. The user interface used to select a file can be implemented through the <input type=file> call.
A Blob interface that represents the original binary data, through which you can access the byte data inside.
A File interface contains read-only attribute information of a file, such as file name, file type, and file data access address.
A FileReader interface that provides a method to read a file and an event model that gets the result of a file read.
A FileError interface and a FileException object that defines the error generation conditions in this specification.
How to use this example: In this example, I gave a picture board where you can drag and drop an image from the local file system, or you can also use the file selection box to select the image. In the example, please only select the image file, I did not add file filtering and file type checking. Remember that no browser fully implements HTML5. This example needs to be run on a browser that supports HTML5, such as Firefox 3.5 or above.
The main method to implement the File API is very simple, just like the following:
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 = ['<img src="', e.target.result,'"/>'].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>:
<td align=left height=105″ ondragenter=return false ondragover=return false ondrop=dropIt(event)>
<output id=thumbs></output>
</td>
In this example, I just drag the local file into the artboard. However, I think it can show you the simple but powerful capabilities of the File API