Shulou(Shulou.com)06/03 Report--

Recently, in their own three-Fengyun-free-fee-host-deployed an web online picture upload application, using several front-end upload components, are not ideal, in view of the current support for HTML5 browsers have become the mainstream, decisively abandon IE6 this old antique, use HTML5 file upload function. Html5 solves the old problem of uploading files and showing the progress of uploads at the same time. Now most websites use Flash to achieve this function, and some sites continue to use Html with enctype=multipart/form-data, but need to modify the server-side availability to show users the progress of file upload. In essence, what you need to do is that when you receive a file on the server side, you send it a byte stream, so you need to know how many bytes you have received and convey this information to the client browser in some way. the file has been uploaded all the time in this process. This approach works very well, and it's not as problematic as Flash upload (especially when dealing with large file uploads), but it's quite complex and doesn't sound easy to understand, because you essentially take over the entire server-side processing (when getting a stream of bytes) and include implementing the multipart/form-data protocol on the server side, along with a series of other things.

Upload files using Html5

XMLHttpRequest has changed completely in the Html5 specification, stipulating that the XMLHttpRequest Level 2 specification (currently the latest version) includes the following new features:

Handling byte streams, such as progress events in uploading or downloading as File,Blob,FormData objects uploaded or downloaded, cross-site requests allow anonymous requests to be created can set request timeout

We will be able to see # 1 and # 2 more clearly in this article. Usually, the file is uploaded using XMLHttpRequest and the upload progress information is provided to the end user. It is important to note that this approach does not require any changes on the server side, at least currently dealing with the multipart/form-data protocol. So the server-side processing logic remains the same, which makes it quite easy for developers to adapt to this technology.

Note: in the picture above, the information prompt area is provided to the user:

The percentage of information about the selected file that has been uploaded. Progress bar upload speed or upload bandwidth. How long will it take before the upload is completed? the size of the uploaded file.

Server-side response

Item 6 above may not seem important, but it is actually quite important. Because we use XMLHttpRequest, the upload takes place in the background, the page does not jump, etc., so it is a very good feature for you to use it for other things.

Html5 Progress Event

For the Html5 Progress Events specification, Html5 Progess Events provides the following information relevant to this discussion

Total-Total number of bytes

Loaded-number of bytes uploaded so far

LengthComputable-computable uploaded bytes

Notice that we need to use two pieces of information to calculate all the other information to be displayed to the user. It is quite easy to calculate the other information through the above, but that requires some extra code and creates a timer.

What is Html5 Progress Event supposed to be?

Considering that some people want to better provide all the information to users, Html5 Progress Event should better meet the needs, because it is quite simple to provide this additional information to browser vendors, so it is recommended that progress event should be modified as follows:

Total-Total number of bytes

Loaded-number of bytes uploaded so far

LengthComputable-computable uploaded bytes

TransferSpeed long Typ

TimeRemaining JavaScript date object

XMLHttpRequest for Html5 upload

Browser support

The minimum version of the browser that supports this feature

Firefox 4.0 beta 6

Chrome 6

Safari 5.02

IE 9 Beta and Opera 10.62 does not support this feature

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.