jQuery File Upload ファイルアップロードプラグインの使い方

2年 ago
芽依, 雨夜
1 minute

jQuery ファイルアップロードプラグインを使用するには、以下の手順に従う必要があります。

  1. まずjQueryとjQuery File UploadプラグインのJavaScriptファイルをインポートします。ページ内にはjQueryファイルより先に必ずjQuery File Uploadファイルをインポートして下さい。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="path/to/jquery.fileupload.js"></script>
  1. HTMLでファイルアップロードフォームを作成し、ファイル選択用のインプットボックスを追加します。
<form id="fileupload" action="upload.php" method="POST" enctype="multipart/form-data">
   <input type="file" name="files[]" multiple>
   <button type="submit">上传</button>
</form>

なお、フォームの action 属性は、ファイルをアップロードするためのサーバー側のスクリプトを指す必要があります。

  1. ファイルをアップロード
  2. ファイルを添付する
$(function() {
   $('#fileupload').fileupload({
      dataType: 'json',
      done: function (e, data) {
         // 文件上传完成后的回调函数
      }
   });
});

この例では、ファイルアップロードの完了後にサーバーから返されるJSON応答を受け取るように、dataTypeオプションをjsonに設定します。

  1. ファイルアップロード完了時に サーバから返却されたレスポンスのデータを処理することができます。
done: function (e, data) {
   $.each(data.result.files, function (index, file) {
      console.log(file.name); // 打印文件名
   });
}

サンプルでは サーバから返ってくる data.result.files 配列をイテレートして各ファイルの名称を出力しています。

  1. 最後に追加の構成オプションとして、ファイルのタイプ、ファイルサイズ、同時アップロード数などの必要な設定も追加できます。

jQuery File Uploadファイルアップロードプラグインを使用した簡単なサンプルで、ニーズに合わせて設定やカスタマイズができます。

bannerAds