JQueryのuploadifyの使い方

1年 ago
桜, 春樹
1 minute

jQuery UploadifyはjQueryの多様なファイルアップロードプラグインで、複数のファイルのアップロード機能の利便性を高めるために使用されます。

次の手順に従ってください。

  1. jQueryライブラリとUploadifyプラグインの関連ファイルをインポート
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="uploadify/jquery.uploadify.js"></script>
<link rel="stylesheet" type="text/css" href="uploadify/uploadify.css">
  1. アップロードボタンとアップロードの進捗状況を表示するための要素を作成します。
<input type="file" name="file_upload" id="file_upload" />
<div id="queue"></div>
  1. Uploadifyプラグインを初期化
$(function() {
  $("#file_upload").uploadify({
    'swf': 'uploadify/uploadify.swf',
    'uploader': 'upload.php',
    'buttonText': '选择文件',
    'fileObjName': 'file',
    'fileSizeLimit': '10MB',
    'fileTypeExts': '*.jpg; *.jpeg; *.gif; *.png',
    'formData': {'timestamp': '<?php echo time();?>',
                 'token': '<?php echo md5('unique_salt' . time());?>'},
    'onUploadSuccess': function(file, data, response) {
      alert('文件' + file.name + '上传成功！');
    },
    'onUploadError': function(file, errorCode, errorMsg, errorString) {
      alert('文件' + file.name + '上传失败: ' + errorMsg);
    }
  });
});

上記コード内の引数は以下の通りです。

  1. HTML5に対応していないブラウザーでファイルアップロードを実現するための、Flashファイルのパス
  2. サーバーサイドでアップロードスクリプトのパスを処理します。
  3. ボタンに表示されるテキスト
  4. fileObjName: ファイルアップロード時のフィールド名。
  5. ファイル サイズの最大値を制限します。
  6. 許可するアップロードファイル形式
  7. ファイル送信時にサーバーに一緒に送信される追加データ。
  8. アップロード成功時のコールバック関数
  9. onUploadError: アップロード失敗時のコールバック関数
  1. サーバーサイドでファイルアップロードを処理する。

アップローダディのプラグインはデータをPOSTリクエストによってサーバー側に送信し、サーバー側はそれらのファイルを処理する必要があります。サンプルコードではアップロードのスクリプトパスはupload.phpになっています。このスクリプトはニーズに合わせて作成する必要があります。通常はファイルのアップロードを処理するためにPHP、Python、Rubyなどのサーバー側言語を使用します。

以上のステップはjQuery Uploadly プラグインを使用した、複数のファイルをアップロードする基本です。具体的な利用には、自分のニーズに合わせたオプションを設定したり、スタイルを調整したりできます。

bannerAds