uploadifiveアップロードプラグインの使用
5281 ワード
1カスタムアップロードエラー/進捗プロンプトの場所
'queueID':"uploadifive-uploadFileBtn-queue-custom",
queueIDを定義すると、アップロードされたエラーメッセージまたは進捗プロンプトがカスタムidのelementで表示されます.
プラグインソースは、queueIDが定義されている場合、カスタムIDでコンテナとして使用されます.
2 overrideEvents:eventの書き換え
プラグインのデフォルトのeventを使用しない場合は、「overrideEvents」:[「onCancel」>「onError」>「onAddQueueItem」]を定義し、対応するevent functionを定義できます.
もちろん、必ずプラグインの書き方を参考にしてください.そうしないと間違います.例えばaddQueueItemはfileを定義しなければならない.queueItem
ない場合はアップロード時にfileが見つからない.エラーメッセージ
3 buttonClass:buttonスタイルのカスタマイズ
ここに複数のカスタムclassを追加し、スペースで区切ることができます.
ソースコード
4
'auto':true,//ファイルを選択して自動的にアップロード
'file SizeLimit':'10 MB',//アップロードファイルサイズ制限
'file Type':["jpg","png","jpeg",//アップロードファイルタイプ制限
'width':150,//アップロードボタン幅
'height':38,//アップロードボタン高さ
buttonText:「Upload File」//ボタン文字のアップロード
'dnd':true,//ドラッグアンドドロップを許可
'formData':{'PHPSESSID':''}、//formパラメータ付き.よく使われるのはセッションなどです
'onUploadComplete':function(){}//アップロード完了後に実行されるfunction
'removeCompleted':true//=true、アップロードが完了するとonCancelがトリガーされ、アップロードプロンプトまたはエラープロンプトが削除されます.カスタムonCancelが呼び出されます
ソースコード
5'uploadScript':"/upload_file"、//サーバ側処理パス
6'multi':false//複数のファイルの同時選択をサポートするかどうか
7'simUploadLimit':0,//The maximum number of files to upload at once一度にアップロードするファイルの最大数
ソースコード
8 'queueSizeLimit' : 0, //The maximum number of files that can be in the queue
9 'truncateLength' : 0, //The length to truncate the file names to
10'uploadLimit':0,//The maximum number of files you can uploadこれはfileを複数回アップロードする最大ファイル数の制限です.
uploadLimitの設定でuploadsが検証されます.count(queue.countではありません)
ソースコード
11 'dropTarget' : false, //Selector for the drop target
特別なテクニック:
一部のタイプのファイルはjsでfileを取得できない.typ.例えばcrt証明書タイプのファイルです.依然としてuploadが実行され、バックグラウンドで判断した後にエラーメッセージが返されます.この場合、JSはエラーメッセージを取得できますが、uploadifiveのデフォルトのエラーメッセージでエラーメッセージを表示したい場合はどうすればいいですか?
ソースコードを調べたところ,エラー情報の処理はerror関数にあることが分かった.したがって、error関数を直接呼び出し、errory_を渡すことができます.type処理.参照demo
'queueID':"uploadifive-uploadFileBtn-queue-custom",
queueIDを定義すると、アップロードされたエラーメッセージまたは進捗プロンプトがカスタムidのelementで表示されます.
プラグインソースは、queueIDが定義されている場合、カスタムIDでコンテナとして使用されます.
// Create the queue container
if (!settings.queueID) {
settings.queueID = settings.id + '-queue';
$data.queueEl = $('<div id="' + settings.queueID + '" class="uploadifive-queue" />');
$data.button.after($data.queueEl);
} else {
$data.queueEl = $('#' + settings.queueID);
}
2 overrideEvents:eventの書き換え
プラグインのデフォルトのeventを使用しない場合は、「overrideEvents」:[「onCancel」>「onError」>「onAddQueueItem」]を定義し、対応するevent functionを定義できます.
onAddQueueItem:function(){},
onCancel:functio(){},
onError:functio(){},
もちろん、必ずプラグインの書き方を参考にしてください.そうしないと間違います.例えばaddQueueItemはfileを定義しなければならない.queueItem
ない場合はアップロード時にfileが見つからない.エラーメッセージ
3 buttonClass:buttonスタイルのカスタマイズ
ここに複数のカスタムclassを追加し、スペースで区切ることができます.
ソースコード
if (settings.buttonClass) $data.button.addClass(settings.buttonClass);
4
'auto':true,//ファイルを選択して自動的にアップロード
'file SizeLimit':'10 MB',//アップロードファイルサイズ制限
'file Type':["jpg","png","jpeg",//アップロードファイルタイプ制限
'width':150,//アップロードボタン幅
'height':38,//アップロードボタン高さ
buttonText:「Upload File」//ボタン文字のアップロード
'dnd':true,//ドラッグアンドドロップを許可
'formData':{'PHPSESSID':''}、//formパラメータ付き.よく使われるのはセッションなどです
'onUploadComplete':function(){}//アップロード完了後に実行されるfunction
'removeCompleted':true//=true、アップロードが完了するとonCancelがトリガーされ、アップロードプロンプトまたはエラープロンプトが削除されます.カスタムonCancelが呼び出されます
ソースコード
if (settings.removeCompleted) {
setTimeout(function() { methods.cancel.call($this, file); }, 3000);
}
5'uploadScript':"/upload_file"、//サーバ側処理パス
6'multi':false//複数のファイルの同時選択をサポートするかどうか
7'simUploadLimit':0,//The maximum number of files to upload at once一度にアップロードするファイルの最大数
ソースコード
// Check if the simUpload limit was reached
if (($data.uploads.current >= settings.simUploadLimit && settings.simUploadLimit !== 0) || ($data.uploads.current >= settings.uploadLimit && settings.uploadLimit !== 0) || ($data.uploads.count >= settings.uploadLimit && settings.uploadLimit !== 0)) {
return false;
}
8 'queueSizeLimit' : 0, //The maximum number of files that can be in the queue
9 'truncateLength' : 0, //The length to truncate the file names to
10'uploadLimit':0,//The maximum number of files you can uploadこれはfileを複数回アップロードする最大ファイル数の制限です.
uploadLimitの設定でuploadsが検証されます.count(queue.countではありません)
ソースコード
// Check if the upload limit was reached
if (($data.uploads.count + $data.uploads.current) < settings.uploadLimit || settings.uploadLimit == 0) {
if (!keepVars) {
$data.uploads.attempted = 0;
$data.uploads.successsful = 0;
$data.uploads.errors = 0;
var filesToUpload = $data.filesToUpload();
// Trigger the onUpload event
if (typeof settings.onUpload === 'function') {
settings.onUpload.call($this, filesToUpload);
}
}
11 'dropTarget' : false, //Selector for the drop target
特別なテクニック:
一部のタイプのファイルはjsでfileを取得できない.typ.例えばcrt証明書タイプのファイルです.依然としてuploadが実行され、バックグラウンドで判断した後にエラーメッセージが返されます.この場合、JSはエラーメッセージを取得できますが、uploadifiveのデフォルトのエラーメッセージでエラーメッセージを表示したい場合はどうすればいいですか?
ソースコードを調べたところ,エラー情報の処理はerror関数にあることが分かった.したがって、error関数を直接呼び出し、errory_を渡すことができます.type処理.参照demo
'onUploadComplete' : function(file, data) {
var response = JSON.parse(data);
//
if (response.status == "error") {
var error = response.info,
error_type;
if (error == " ") {
error_type = "FORBIDDEN_FILE_TYPE";
}
var $data = $(this).data('uploadifive');
$data.error(error_type, file, true);
return;
}
//
$(".picture_wrap").find("img").attr("src", response.info + "?w=80&h=80");
$("#pictureInput").val(response.info);
},