How to upload files asynchronously in html-HTML Tutorial-php.cn

Home

Web Front-end

HTML Tutorial

How to upload files asynchronously in html

php中世界最好的语言

Feb 08, 2018 am 09:38 AM

html upload asynchronous

This time I will show you how to upload files asynchronously in HTML. What are the precautions for uploading files asynchronously in HTML? Here is a practical case, let’s take a look.

The code is as follows:

<form action="/hehe" method="post"> 
<input type="text" value="hehe"/> 
<input type="submit" value="upload" id="upload"/> 
</form>

Copy after login

This is the most common and simplest form submission method in HTML, but this method must switch pages. Maybe sometimes we hope to be able to communicate with the server on the same page When interacting, you don’t want to switch to another page after submitting the form. What should you 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

<iframe id="uploadFrame" name="uploadFrame"></iframe>

Copy after login

and add the target

attribute in the form, target=uploadFrame, target The 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 you try it).
A brief explanation, in fact, our form here is refreshed after submission, but why is there no 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)
jqueryAsynchronous submission of form
Here is introduced ajaxupload, a form submission plug-in for jquery, and its usage is relatively simple

<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: &#39;/hehe&#39;, 
type:"post", 
data: {}, 
name: &#39;textfield&#39;, 
onSubmit: function(file, ext) { 
alert("上传成功"); 
}, 
onComplete: function(file, response) { 
} 
}); 
})(); 
</script> 
</body>

Copy after login

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, in new AjaxUpload(id, object) The id 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, ext is the suffix of the file, and the data returned by the server can be processed in the onComplete function. The above are two simple file upload client implementations.

I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!