Home > Web Front-end > JS Tutorial > Sharing the usage of the plug-in to upload files asynchronously using jQuery

Sharing the usage of the plug-in to upload files asynchronously using jQuery

小云云
Release: 2017-12-31 16:45:36
Original
1313 people have browsed it

Now I want to implement the function of using ajax to upload files, but I found that the ajax method that comes with Jquery can only upload the file name, but not the file; although submitting with form can upload the file, it requires refreshing the page. . . After multiple searches, I found an available jQuery plug-in, which just meets the requirements for asynchronous file upload. This article mainly introduces the detailed usage of the plug-in that uses jQuery to asynchronously upload files. Friends who need it can refer to it. I hope it can help everyone.

Code

jquery.form.js

Usage

This plug-in is based on form submission. We only need to write a form to submit files normally. For example:

<form id="myForm" action="comment.php" method="post" enctype="multipart/form-data">
  <input type="file" name="name" />
  <input type="submit" value="Submit Comment" />
</form>
Copy after login

Then add the following code in js:

<html>
<head>
  <script src="jquery.js"></script>
  <script src="jquery.form.js"></script>
  <script>
    $(document).ready(function() {
      $('#myForm').ajaxForm(function(data) {
        alert(data);
      });
    });
  </script>
</head>
Copy after login

In this way, you can monitor the form submission event, turn it into ajax and send it to the background, and then transfer the information returned from the background from obtained from data. In this way, you can use ajax communication to transfer files.

Related recommendations:

Detailed explanation of form upload to implement asynchronous file upload with ajax

Detailed explanation of ajax fileupload asynchronous upload plug-in

Native js method to implement asynchronous file upload

The above is the detailed content of Sharing the usage of the plug-in to upload files asynchronously using jQuery. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template