Example of asynchronous file upload in html
|
Copy code The code is as follows:<form action="/hehe" method="post"> <input type="text" value="hehe"/> <input type="submit" value="upload" id="upload"/> </form> 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 page after submitting the form. What should we do? Here are several ways to submit forms. First, let me introduce a solution that saves the country by taking a detour. The above code snippet does not need to be changed, just add the following code Copy code The code is as follows:<iframe id="uploadFrame" name="uploadFrame"></iframe> 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). To explain briefly, our form is refreshed after submission, but why is there no page jump? It's because of the iframe. In fact, we refreshed in the iframe, and the iframe is empty, which is the same as not refreshing. It gives us an asynchronous feeling. This is not an orthodox method, but it is a roundabout way to save the country. Of course, this method is not applicable in many cases. For example, we hope to retrieve something from the server after submitting the form. This method is obviously not feasible. Here we also need a truly asynchronous submission form. (II) jQuery asynchronous form submission Here we introduce a jQuery form submission plug-in ajaxupload, which is also relatively simple to use. Copy code 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("Upload successful"); }, 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. The id in new AjaxUpload (id, object) corresponds to the id of the bound object. As for the second parameter, data is the additional data, name can be arbitrary, onSubmit function is the callback function before uploading the file, the first parameter file is the file name, ext is the file suffix, and the onComplete function can process the data returned by the server. The above are two simple file upload client implementations. |
<<: MySQL scheduled full database backup
>>: Detailed explanation of adding click event in echarts tooltip in Vue
Recommend
Summary of mysqladmin daily management commands under MySQL (must read)
The usage format of the mysqladmin tool is: mysql...
Mysql | Detailed explanation of fuzzy query using wildcards (like,%,_)
Wildcard categories: %Percent wildcard: indicates...
How to get the intersection/difference/union of two sets in mysql
Common scenarios of MySQL: getting the intersecti...
A detailed tutorial on master-slave replication and read-write separation of MySQL database
Table of contents Preface 1. MySQL master-slave r...
How to use vue-bootstrap-datetimepicker date plugin in vue-cli 3
Demand Background Recently, I plan to use Vue and...
Solution to elementui's el-popover style modification not taking effect
When using element-ui, there is a commonly used c...
HTML Basics: The basic structure of HTML
The basic structure of HTML hypertext documents is...
The solution to the problem that the web table or div layer is stretched in the web page
<br />When we design web pages, we always en...
Notes on matching MySql 8.0 and corresponding driver packages
MySql 8.0 corresponding driver package matching A...
How to run MySQL in Docker environment and enable Binlog to configure master-slave synchronization
The same server simulates the master-slave synchr...
The difference between Readonly and Disabled
To summarize: Readonly is only valid for input (te...
A few experiences in self-cultivation of artists
As the company's influence grows and its prod...
Linux unlink function and how to delete files
1. unlink function For hard links, unlink is used...
Detailed explanation of the usage of sync modifier in Vue3 parent-child component parameter transfer
Table of contents One-way data flow explanation V...
How to delete folders, files, and decompress commands on Linux servers
1. Delete folders Example: rm -rf /usr/java The /...