Example of asynchronous file upload in html

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

Steps of an excellent registration process

For a website, it is the most basic function. So l...

MySQL subqueries and grouped queries

Table of contents Overview Subqueries Subquery Cl...

Web skills: Multiple IE versions coexistence solution IETester

My recommendation Solution for coexistence of mul...

How to create a style guide for your website in web interface design (with pictures and text)

What is a style guide? Simply put, it’s a document...

Tutorial on installing GreasyFork js script on mobile phone

Table of contents Preface 1. Iceraven Browser (Fi...

Let's deeply understand the event object in js

We know that the commonly used events in JS are: ...

CSS style reset and clear (to make different browsers display the same effect)

In order to make the page display consistent betwe...

In-depth explanation of various binary object relationships in JavaScript

Table of contents Preface Relationships between v...

A brief discussion on the maximum number of open files for MySQL system users

What you learn from books is always shallow, and ...

Html sample code for reading and displaying pictures in a local folder

One purpose Select a local folder on the Html pag...

Teach you the detailed process of installing DOClever with Docker Compose

Table of contents 1. What is Docker Compose and h...

Typescript+react to achieve simple drag and drop effects on mobile and PC

This article shares the specific code of typescri...

Vue Basics Listener Detailed Explanation

Table of contents What is a listener in vue Usage...

Detailed example of remotely connecting to Docker using TLS encrypted communication

By default, Docker runs over a non-networked UNIX...

Shorten the page rendering time to make the page run faster

How to shorten the page rendering time on the bro...