ホームページ > 記事 > ウェブフロントエンド > jQuery Web アップロード プラグインの使用手順の詳細な説明
jQuery Web アップロード プラグインの使用手順の詳細な説明
- php中世界最好的语言オリジナル
- 2018-04-26 11:33:271386ブラウズ
今回は、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 関連の関数の定義がない場合に報告されます。
Uploadifyプラグインはプログレスバー付きのバッチアップロード機能を作成します
jQuery EasyUIプラグインはどのようにメニューリンクボタンを作成しますか
以上がjQuery Web アップロード プラグインの使用手順の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。