Example of asynchronous file upload in html_HTML/Xhtml_Web page production

Copy code

The code is as follows:

Copy code

The code is as follows:

This is the most common and simplest form submission method in HTML, but this method must switch pages. Maybe sometimes we want to interact with the server on the same page, and do not want to switch to another one after submitting the form. Page, what should I do? Here are several ways to submit forms.
First introduce a solution to save the country through curves. The above code snippets do not need to be changed. Just add the following code

Copy code

The code is as follows:

and Add the target attribute in the form, target=uploadFrame. The target attribute needs to be consistent with the value of the id in the iframe (or the value of the name attribute, you will know after trying it).

A brief explanation, in fact, our form here is refreshed after submission, but why does it not jump to the page? It is because of this iframe. In fact, we refreshed it in the iframe, and the iframe is empty, that is It is the same as not refreshing, giving us an asynchronous feeling. This is not an orthodox method, but it is also a way to save the country. Of course, this method is not applicable in many cases. For example, we want to submit a completed form. After retrieving something from the server, this method obviously won't work. Here we also need to truly asynchronously submit the table.

(2) jquery asynchronous form submission

Here we introduce ajaxupload, a form submission plug-in for jquery, and its use is relatively simple

Copy code

The code is as follows:

< ;!---->

<script> <br>( function(){ <br>new AjaxUpload("#upload", { <br>action: '/hehe', <br>type: "post", <br>data: {}, <br>name: 'textfield ', <br>onSubmit: function(file, ext) { <br>alert("Upload successful"); <br>}, <br>onComplete: function(file, response) { <br>} <br>} ); <br>})(); <br></script>

The main code is posted here. After the page rendering is completed, we Just use a self-executing function to add an asynchronous upload event to the button with the id of upload. The id in new AjaxUpload(id, object) corresponds to the id of the bound object. As for the second parameter, data is additional data. The name can be arbitrary. The onSubmit function is the callback function before uploading the file. The first parameter file is the file name, and ext is the file extension. As for the onComplete function, the data returned by the server can be processed. The above are the implementations of two simple file upload clients.