HTML 5 file API: Files Drag and drop upload function

The upcoming HTML5 specification has several features that make HTML far beyond its own capabilities as a markup language, and provide some powerful scripting tools for WEB developers. The organization responsible for overseeing the HTML5 development process has just published a strong draft specification –HTML5 the File API interface feature.

The API is designed to improve the way browser-based WEB applications handle file uploads, making it possible for files to be dragged and uploaded directly. The draft defines a new input option <input type= "file" > to handle uploading files.

More surprisingly, the API provides developers with a way to correlate upload data and display upload progress and other information.

However, in addition to Firefox 3.6, there are few browser brands that support the API well. If you have installed the latest version of Firefox 3.6, you can experience the file drag-and-drop upload feature at the following demo address.

Demo: Firefox 3.6 file drag and drop upload function

However, once the new features are widely supported, the HTML5 file API allows for desktop-like drag-and-drop effects, as well as the ability to synchronously process multiple uploads and display upload progress, no longer using Flash technology or other external tools.

For more details on the HTML5 File API draft, as well as the development application in conjunction with JavaScript, please refer to the Publish first working draft of the file API for more details on this article.

HTML 5 file API: Files Drag and drop upload function