jQuery Web アップロードプラグインの使用手順の詳細な説明-jsチュートリアル-php.cn

jQuery Web アップロードプラグインの使用手順の詳細な説明

php中世界最好的语言

リリース： 2018-04-26 11:33:27

オリジナル

1349 人が閲覧しました

今回は、jQuery Web アップロードプラグインの使用手順について詳しく説明します。jQuery Web アップロードプラグインを使用する際の注意事項は何ですか?実際の事例を見てみましょう。

テスト例以下は簡単な使用例です: ここでは、アップロード処理として Uploadify パッケージに付属する php テストスクリプトを使用するため、ここでは php テスト環境として wamp を php ウェブサイトのルートにインストールしますここでは、Uploadify の解凍ディレクトリに、ファイル保存ディレクトリとしてアップロードを作成します。
uploadify_test.php ファイルを作成し、次の内容を追加します:

<html>
<head>
  <link href="uploadify-v2.1.4/uploadify.css" rel="stylesheet" type="text/css" /> 
  <script type="text/javascript" src="uploadify-v2.1.4/jquery-1.4.2.min.js" ></script> 
  <script type="text/javascript" src="uploadify-v2.1.4/swfobject.js" ></script> 
  <script type="text/javascript" src="uploadify-v2.1.4/jquery.uploadify.v2.1.4.min.js" ></script> 
  <style type="text/css">
    #custom-demo .uploadifyQueueItem {
     background-color: #FFFFFF;
     border: none;
     border-bottom: 1px solid #E5E5E5;
     font: 11px Verdana, Geneva, sans-serif;
     height: 50px;
     margin-top: 0;
     padding: 10px;
     width: 350px;
    }
    #custom-demo .uploadifyError {
     background-color: #FDE5DD !important;
     border: none !important;
     border-bottom: 1px solid #FBCBBC !important;
    }
    #custom-demo .uploadifyQueueItem .cancel {
     float: right;
    }
    #custom-demo .uploadifyQueue .completed {
     color: #C5C5C5;
    }
    #custom-demo .uploadifyProgress {
     background-color: #E5E5E5;
     margin-top: 10px;
     width: 100%;
    }
    #custom-demo .uploadifyProgressBar {
     background-color: #0099FF;
     height: 3px;
     width: 1px;
    }
    #custom-demo #custom-queue {
     border: 1px solid #E5E5E5;
     height: 213px;
     margin-bottom: 10px;
     width: 370px;
    }        
  </style>  
  <script type="text/javascript">
    $(function() {
    $('#custom_file_upload').uploadify({
       'uploader'    : 'uploadify-v2.1.4/uploadify.swf',
       'script'     : 'uploadify-v2.1.4/uploadify.php',
       'cancelImg'   : 'uploadify-v2.1.4/cancel.png',
       'folder'     : 'uploadify-v2.1.4/uploads',
       'multi'     : true,
       'auto'      : true,
       'fileExt'    : '*.jpg;*.gif;*.png;*.txt',
       'fileDesc'    : 'Image Files (.JPG, .GIF, .PNG)',
       'queueID'    : 'custom-queue',
       'queueSizeLimit' : 3,
       'simUploadLimit' : 3,
       'sizeLimit'  : 1024000,
       'removeCompleted': false,
       'onSelectOnce'  : function(event,data) {
         $('#status-message').text(data.filesSelected + ' files have been added to the queue.');
        },
       'onAllComplete' : function(event,data) {
         $('#status-message').text(data.filesUploaded + ' files uploaded, ' + data.errors + ' errors.');
        }
      });        
    });
  </script>
</head>
<body>
  <p id="custom-demo" class="demo">
     <h2>Custom Demo</h2>
    <p>Uploadify is fully customizable. Here is an implementation with multiple files, auto uploads, limited file types, limited queue size, and custom onSelectOnce and onAllComplete functions.</p>
    <p class="demo-box">
      <p id="status-message">Select some files to upload:</p>
      <p id="custom-queue"></p>
      <input id="custom_file_upload" type="file" name="Filedata" />    
    </p>
  </p>
</body>
</html>

ログイン後にコピー

Uploadify プラグインプロンプト $("#id").uploadify は関数エラーではありません考えられる原因

swfobject.js および jquery.uploadify.v2.1.4。 js は jquery API を使用するため、これら 2 つのファイルは jquery-1.4.2.min.js ファイルに依存する必要があります。

通常の状況では、次の js ファイルを導入する必要があります:

<script type="text/javascript" src="uploadify-v2.1.4/jquery-1.4.2.min.js" ></script> 
<script type="text/javascript" src="uploadify-v2.1.4/swfobject.js" ></script> 
<script type="text/javascript" src="uploadify-v2.1.4/jquery.uploadify.v2.1.4.min.js" ></script>

ログイン後にコピー

ただし、別の jquery JS ファイルがプロジェクト内にすでに存在しているため、ファイルの競合が発生します。別の jQuery ファイルの導入位置は、上記 3 つの js ファイルの導入位置の後ろにあります。このとき、プロジェクトでは既存の jquery JS ファイルが使用されるため、jquery.uploadify.v2.1.4.min.js が読み込まれます。このエラーは、ファイル内に利用可能な jquery 関連の関数の定義がない場合に報告されます。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

Uploadifyプラグインはプログレスバー付きのバッチアップロード機能を作成します

jQuery EasyUIプラグインはどのようにメニューリンクボタンを作成しますか

以上がjQuery Web アップロードプラグインの使用手順の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。