uploadifive上傳插件的使用

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.queueItem，會提示錯誤

3 buttonClass：自定義button樣式
可以在這裡添加上多個自定義的class，用空格隔開
源碼

if (settings.buttonClass) $data.button.addClass(settings.buttonClass);

4
'auto' : true,// 選擇文件後自動上傳
'fileSizeLimit' : '10MB',//上傳文件大小限制
'fileType' : ["jpg","png","jpeg"],//上傳文件類型限制
'width' : 150,//上傳按鈕寬度
'height' : 38,// 上傳按鈕高度
buttonText : "Upload File", //上傳按鈕文字
'dnd'             : true,   //允許拖放上
'formData'    : {'PHPSESSID' : '<?php echo session_id(); ?>'},// 附帶form參數。常用的比如session等
'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);
},