jQuery を使用してファイルを非同期にアップロードするためのプラグインの使用方法を共有する-jsチュートリアル-php.cn

jQuery を使用してファイルを非同期にアップロードするためのプラグインの使用方法を共有する

小云云

リリース： 2017-12-31 16:45:36

オリジナル

1259 人が閲覧しました

今度は、ajaxを使用してファイルをアップロードする機能を実装したいと思いますが、Jqueryに付属のajaxメソッドはファイル名のみをアップロードできますが、フォームを使用して送信するとファイルをアップロードできますが、更新が必要であることがわかりました。ページ。。。複数の検索を行った結果、非同期ファイルのアップロードの要件をちょうど満たす、利用可能な jQuery プラグインを見つけました。この記事ではjQueryを使ってファイルを非同期アップロードするプラグインの詳しい使い方を中心に紹介しますので、必要な方は参考にしていただければ幸いです。

コード

jquery.form.js

使用法

このプラグインは、通常のようにファイルを送信するためのフォームを記述するだけです:

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

ログイン後にコピー

次に、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>

ログイン後にコピー

このようにして、フォーム送信イベントをリッスンし、それを ajax に変換してバックグラウンドに送信し、バックグラウンドによって返された情報をデータから取得できます。このようにして、ajax通信を利用してファイルを転送することができます。