Home > Article > Web Front-end > Analysis of examples of asynchronous file upload in HTML
Analysis of examples of asynchronous file upload in HTML
- 高洛峰Original
- 2017-03-07 11:21:13961browse
Sometimes we want to interact with the server on the same page, but we don’t want to switch to another page after submitting the form. What should we do? Here are several ways to submit forms
Code As follows:
<form action="/hehe" method="post"> <input type="text" value="hehe"/> <input type="submit" value="upload" id="upload"/> </form>
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 If you don’t want to switch to another page after submitting the form, what should you do? Here are several ways to submit the form.
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
The code is as follows:
<iframe id="uploadFrame" name="uploadFrame"></iframe>
And add the target attribute in the form 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, which gives 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 submission form
Here we introduce ajaxupload, a form submission plug-in for jquery. The usage is relatively simple.
The code is as follows :
<body>
<form action="/hehe" method="post">
<input type="text" value="hehe"/>
<input type="button" value="upload" id="upload"/>
<!--<input type="button" value="send" onclick="send()"/>-->
</form>
<script>
(function(){
new AjaxUpload("#upload", {
action: '/hehe',
type:"post",
data: {},
name: 'textfield',
onSubmit: function(file, ext) {
alert("上传成功");
},
onComplete: function(file, response) {
}
});
})();
</script>
</body>
The main code is posted here. After the page rendering is completed, we use a self-executing function to add an asynchronous upload event to the button with the id upload, new AjaxUpload(id,object ) corresponds to the id of the binding 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. ext is the suffix of the file. 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.
For more related articles on the example analysis of asynchronous file upload in HTML, please pay attention to the PHP Chinese website!