HTML5 implementation of methods to access local files

This article mainly introduces the method of accessing local files in HTML5. It has certain reference value. Now I share it with you. Friends in need can refer to it.

Today, I will share with you a A simple application to demonstrate how to use FileReader. FileReader is a file operation API provided in HTML5. Friends who need it can learn about it. In the previous articles, I shared several HTML5 examples with you, including drag-and-drop function demonstration, page content editable demonstration and local storage function 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 are looking at the HTML 5 example I wrote earlier, I was thinking about creating a simple but applicable example to practice these new HTML5 features in a more novel way. My goal is not to simply demonstrate these HTML 5 APIs, but to use examples to show developers how to actually 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 web applications. You can select them and access their information programmatically. This File API includes:
A FileList sequence, representing an array consisting of a single file selected in the local system. The user interface for selecting files can be implemented by calling .
A Blob interface, which represents raw binary data. You can access the byte data inside through the Blob object.
A File interface, which stores the read-only attribute information of the file, such as file name, file type, and file data access address.
A FileReader interface, which provides methods for reading a file and an event model for obtaining file reading results.
A FileError interface and a FileException object, which are used to define the error conditions in this specification.
How to use this example: In this example, I give an artboard, you can drag an image from the local file system, or you can use the file selection box to select the image. In the example, please only select image files, I did not add file filtering and file type checking. Please keep in mind 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, 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 = [&#39;<img class="images" src="&#39;, e.target.result,&#39;" title="&#39;, aFile.name, &#39;"/>&#39;].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 align=”left” height=”105″ ondragenter=”return false” ondragover=”return false” ondrop=”dropIt(event)”> 
<output id=”thumbs”></output> 
</td>

In this example, I just dragged the local file into the artboard. However, I think it can show you the simple but powerful capabilities of the File API

The above is the entire content of this article. I hope it will be helpful to everyone's learning. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

How to implement the video live broadcast function in HTML5

The mobile terminal uses H5 to implement the function of compressed image upload

About the code for H5 to call the camera to take pictures and compress the pictures

The above is the detailed content of HTML5 implementation of methods to access local files. For more information, please follow other related articles on the PHP Chinese website!