Shulou(Shulou.com)06/01 Report--

This article will explain in detail how to upload files asynchronously in html. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

The code is as follows:

This is the most common and easiest way to submit a form in html, but it has to switch pages. Maybe 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. Here we share several ways to submit the form.

First of all, a solution to save the nation by curve is introduced. the above code snippet does not need to be changed, as long as the following code is added

And add the target attribute to the form form, and the target=uploadFrame,target attribute needs to be the same as the value of id in iframe (or the value of the name attribute, just give it a try).

To explain briefly, in fact, our form was refreshed after it was submitted, but why didn't we jump to the page? because of this iframe, in fact, we refreshed in iframe, while iframe is empty, which is the same as no refresh, which gives us a sense of asynchronism. This is not an orthodox method, but it is also a way of saving the nation by curve. Of course, this method is not applicable in many cases. For example, if we want to retrieve something from the server after submitting the form, this method obviously doesn't work, and here we also need to submit the form asynchronously.

(2) jquery asynchronously submit the form

What is introduced here is ajaxupload, a plug-in for jquery to submit forms, and it is relatively simple to use.

(function () {

NewAjaxUpload ("# upload", {

Action:'/hehe'

Type: "post"

Data: {}

Name:'textfield'

OnSubmit:function (file,ext) {

Alert ("upload successful")

}

OnComplete:function (file,response) {

}

})

) ()

The main code is posted here. After the rendering of the page is completed, we use a self-executing function to add an asynchronous upload event to id's button for upload. The id in newAjaxUpload (id,object) corresponds to the id of the bound object. As for the second parameter, data is additional data, name can be optional, the onSubmit function is the callback function before uploading the file, and the first parameter file is the file name. Ext is the suffix name of the file, while the onComplete function can handle the data returned by the server. The above are the implementation of two simple file upload clients.

This is the end of the article on "how to upload files asynchronously in html". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.