uploadifiveアップロードプラグインの使用

5281 ワード

1カスタムアップロードエラー/進捗プロンプトの場所
'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);
},