Progressive enhanced parsing of file uploads

File uploads are one of the oldest internet operations.

More than 20 years, it is almost unchanged, or the original appearance: The operation of trouble, lack of interaction, poor user experience. In this era of new technology is changing, it seems very outdated.

Web developers think of a number of ways to improve the file upload function and operation experience, based on a variety of JavaScript libraries, the development of a wide range of plug-ins. However, due to the differences between browsers, the lack of a unified interface, these plug-ins are either cumbersome to use, or not universally applicable.

HTML5 provides a new set of browser APIs that make it possible to revolutionize file uploads. British programmer Remy Sharp summed up these new interfaces, based on his article, discusses how to use the HTML5 API to incrementally enhance file uploads to achieve the following features:

* IFRAME Upload

* Ajax Upload

* Progress bar

* File Preview

* Drag and drop upload

To have a perceptual knowledge of these features, you can first look at the examples provided by Remy Sharp.

Although these APIs are not yet widely deployed, they are the trend of the future. With them, the code can be very elegant and concise, the above five functions can be achieved within 20 lines.

First, the traditional form

Let's start with the basics.

The traditional form of file uploads is the use of table cell element file:

<form id= "Upload-form" action= "upload.php" method= "post" enctype= "Multipart/form-data" >
    
<input type= " File "id=" upload "name=" upload "/> <br/> <input type=
    
" Submit "value=" Upload "  />
    
</form>

All browsers support the above code. It is displayed in IE browser as follows:

The user selects the file first, then clicks on "Upload" button, the file starts to upload.