Home > Article > Web Front-end > 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

小云云Original: 2017-12-31 16:45:361249browse

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>

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>

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!

Statement：

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

Previous article：Detailed example of how jQuery implements the method of changing the color of the navigation bar header menu item after clicking itNext article：Detailed example of how jQuery implements the method of changing the color of the navigation bar header menu item after clicking it

See more

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

Related articles