Three types of asynchronous uploading files in JavaScript _javascript tips

The asynchronous upload file is for a better user experience and a skill that must be mastered by each front-end. Here I present three points about how to upload an asynchronous file.

Use third party controls, such as Flash,activex browser plug-ins upload.

Simulate an asynchronous upload using a hidden iframe.

Use XMLHttpRequest2 to implement asynchronous uploads.

The first use of browser plug-ins upload, need a certain level of basic coding skills, here I will not speak, lest fraught, put forward this point we can own Baidu.

The second type uses a hidden iframe to simulate asynchronous uploads. Why is this a simulation? Because we actually put the return result in a hidden iframe, so we don't jump the current page, it feels like an asynchronous operation.

First post the code:

<! DOCTYPE html>  

There are two key areas of this technology:

The 1.form specifies target, and the submitted results are directed back to the hidden Ifram. (The form's target is consistent with the IFRAME's Name property).

2. After the completion of the submission, the IFRAME page with the main page communication, notification upload results and service-side file information

How do I communicate with my home page?

We used Nodejs to return a window.parent after receiving the file. The method of the main page definition, after the execution can know the file upload completes. The code is simple:

Router.post ('/upload ', multipartmiddleware, function (req, res) {
var fpath = Req.files.myfile.path;
var fname = fpath.substr (fpath.lastindexof (' \ ') +);
settimeout (function () {
var ret = [<script>],
window.parent.uploadFinished (' + fname + '); ",
" </script> "];
Res.send (Ret.join (""));
},);
};

After execution, you can open the Developer option, and you will find that the hidden IFRAME returns some data from the server.

The third type uses XMLHTTPREQUEST2 for true asynchronous uploads.

or post the code first:

<! DOCTYPE html>  

The code is a bit more, but easy to understand. As anyone who has used Ajax knows, the XHR object provides a onreadystatechange callback method for listening to the entire request/response process. There are several more progress events in the XMLHTTPREQUEST2 level specification. There are 6 following events:

1.loadstart: Triggered when the first byte of the response data is received.

2.progress: Constant triggering during receive response.

3.error: Triggered when an error occurs on the request.

4.abort: Triggered when a connection is terminated because of a call to the Abort () method.

5.load: Triggered when full response data is received.

6.loadend: Triggered after communication completes or triggers a error,abort,load event.

This time we can interpret the code: When the transfer event begins, we add a click event to the Stop Transfer button, and a built-in abort method can stop the transmission. If not, it will be uploaded normally until the transmission is complete. The next table code resembles the second method.

Three methods each have advantages and disadvantages, make a simple summary of it.

Third-party controls are good for interactivity and controllability because they are also excellent at getting close to the bottom. However, because of the difficulty of writing, you usually need to install plug-ins yourself, sometimes you may need to write yourself.

Hidden IFrame method I personally feel that there is a very thoughtful way that IFRAME can help us do a lot of things. This approach has extensive browser compatibility and does not require the installation of plug-ins. But its interaction is poor, upload process is not controllable, and performance is very general.

XHR2-level Pure Ajax upload, it must be a relatively high version of the browser (ie9+). But it's very interactive and can see the upload progress and be controllable.

Development can be used in different ways according to requirements. Personally feel that the upload of these files, especially the second provides a thought, the full use of some of the features of HTML tags, may be our developers need to think more places.