JavaScript uploads files asynchronously.

JavaScript uploads files asynchronously.

Asynchronous file upload is required for better user experience and is required by each front-end. Here I propose three methods for asynchronous file upload.

Use third-party controls, such as Flash, ActiveX, and other browser plug-ins.

Use a hidden iframe to simulate asynchronous upload.

Use XMLHttpRequest2 for asynchronous upload.

The first method is to use the browser plug-in for upload, which requires a certain level of underlying coding skills. I will not talk about it here, so as to avoid mistakes. If you propose this, you can use Baidu.

Second, simulate asynchronous upload using a hidden iframe. Why is simulation described here? Because we put the returned results in a hidden iframe, we didn't redirect the current page, just like an asynchronous operation.

First paste the Code:

<! DOCTYPE html> 
This technology has two key points:
1. form will specify the target, and the submitted results will be returned to the hidden ifram. (That is, the target of form is consistent with the name attribute of iframe ).
2. After submission, the iframe page communicates with the home page to notify the upload result and Server File Information.
How can I communicate with the home page?
After receiving the file, we use nodejs to return a window. parent. Home page definition method. After the method is executed, we can know that the file upload is complete. 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 the command is executed, you can open the developer option and you will find that some server data is returned in the hidden iframe.
Third, XMLHttpRequest2 is used for real asynchronous uploads.
Paste the code first:
<! DOCTYPE html> 
There are a lot of code, but it is easy to understand. Anyone who has used AJAX knows that the XHR object provides an onreadystatechange callback method to listen to the entire request/response process. There are several more progress events in the XMLHttpRequest2 standard. There are six events:
1. loadstart: triggered when the first byte of the response data is received.
2. progress: continuously triggered during response receiving.
3. error: triggered when an error occurs in the request.
4. abort: triggered when the connection is terminated because the abort () method is called.
5. load: triggered when the complete response data is received.
6. loadend: triggered after communication is completed or an error, abort, or load event is triggered.
This time we can interpret the code: when the transfer event starts, we will add a click event on the Stop Transfer button, and the built-in abort method can stop the transfer. If you do not click it, the upload will be normal until the transfer is complete. The background code is similar to the second method.
Each of the three methods has its own advantages and disadvantages. Make a simple summary.
Third-party controls are highly interactive and controllable, because they are close to the underlying layer and provide excellent performance. However, because of the difficulty of writing the program, you often need to install the plug-in yourself, and sometimes you may need to write it yourself.
I personally think the hidden iframe method is a very thoughtful method. iframe can help us do a lot of things. This method has extensive browser compatibility and does not require plug-ins to be installed. However, it has poor interactivity, the upload process is uncontrollable, and the performance is also very general.
XHR2-level pure ajax upload requires a browser with a higher version (ie9 + ). However, it is highly interactive and can see the upload progress and be controllable.
Development can adopt different methods as needed. I personally think that uploading these files, especially the second one, provides an idea that makes full use of the features of some html tags, which may be something that our developers need to think about.
Articles you may be interested in:

  

 
   
JQuery plug-in ajaxfileupload. js uploads files asynchronously to an instance.
 
   
Asp.net + ajaxfileupload. js Implement Asynchronous file upload and code sharing
 
   
Asynchronous upload sample code using jquery. upload. js
 
   
Php + js Implement Asynchronous Image Upload instance sharing
 
   
Example of asynchronous file upload using AjaxFileUpload. js
 
   
Javascript asynchronous form submission, Image Upload, and compatibility with asynchronous ajax Simulation Technology