Uploadify 筆記分享 -- 2014年10月18日

最近要作一個項目，有個部分須要用到Uploadify，之前用過，但不是很懂，找了無數遍的中文文檔，發現好多都是之前的，都不能用，一時間索性本身寫了個筆記，隨用隨查

 

    <form>

        <input id="file_upload" name="file_upload" type="file" multiple="true">

        <div id="fileQueue"></div>

    </form>

    <input type="image" src="uploadify/img/upload.jpg" onclick="$('#file_upload').uploadify('upload', '*');" />

    <input type="image" src="uploadify/img/cancel.jpg" onclick="$('#file_upload').uploadify('cancel', '*');" />

 

    <script type="text/javascript">

   

$(function() {

    $('#file_upload').uploadify({

'swf': 'uploadify/uploadify.swf',	flash地址              必須
'uploader': 'uploadify.php',	上傳的後臺地址       必須
'buttonImage': 'uploadify/img/add.jpg',	上傳按鈕的替換圖片
'buttonClass': 'my-uploadify-button',	按鈕樣式
'width': 102,	按鈕寬度
'height'   : 50,	按鈕高度
'auto': false,	是否自動上傳
'queueID':'fileQueue'	顯示的上傳內容所在的DIV 的ID
'buttonText': '上傳文件',	上傳按鈕的顯示文本
'fileSizeLimit' : '100KB',	限制文件大小     0爲不限制
'fileTypeDesc' : 'Any old file you want...',	文件類型下拉框
'fileTypeExts' : '*.gif; *.jpg; *.png',	上傳文件的類型
'formData'      : {'someKey' : 'someValue', 'someOtherKey' : 1}	向後臺發送Json數據
'multi'    : false,	false爲單個上傳  true多文件上傳
'queueSizeLimit' : 5,	最多同時上傳5個
'removeTimeout' : 10,	上傳完成後  10秒鐘從隊列中移除
'requeueErrors': true	若是上傳錯誤 將從新上傳
'successTimeout' : 5,	等待服務器響應時，超過5秒  假設上傳成功
'onCancel' : function(file) {             alert('The file ' + file.name + ' was cancelled.');         }	從隊列中刪除一個文件時觸發
'onClearQueue' : function(queueItemCount) {             alert(queueItemCount + ' file(s) were removed from the queue');         }	取消上傳時觸發
'onDialogClose'  : function(queueData) {             alert(queueData.filesQueued + ' files were queued of ' + queueData.filesSelected + ' selected files. There are ' + queueData.queueLength + ' total files in the queue.');         }	當選擇文件窗口關閉時觸發
'onDialogOpen' : function() {             $('#message_box').html('The file dialog box was opened...');         }	當選擇文件窗口打開時觸發
<input type="file" name="file_upload" id="file_upload" /> <a href="javascript:$('#file_upload').uploadify('disable', true);">Disable Uploadify</a>  'onDisable' : function() {             alert('You have disabled Uploadify!');         }	使上傳按鈕失效，失效觸發onDisable
<input type="file" name="file_upload" id="file_upload" /> <a href="javascript:$('#file_upload').uploadify('disable', false);">Enable Uploadify</a> 'onEnable' : function() {             alert('You can use Uploadify again.');         }	使上傳按鈕生效，生效觸發onEnable
'onFallback' : function() {             alert('Flash was not detected.');         }	引起了在初始化期間若是沒有檢測到一個兼容的版本的Flash瀏覽器。
'onInit'   : function(instance) {             alert('The queue ID is ' + instance.settings.queueID);         }	Uploadify初始化完成時
'onQueueComplete' : function(queueData) {             alert(queueData.uploadsSuccessful + ' files were successfully uploaded.');         }	上傳成功時觸發 uploadsSuccessful 成功地完成了上傳的數量 uploadsErrored 上傳的數量返回一個錯誤
'onSelect' : function(file) {             alert('The file ' + file.name + ' was added to the queue.');         }	選中文件  單擊保存以後觸發 若是選中多個文件會屢次觸發
'onSelectError' : function() {             alert('The file ' + file.name + ' returned an error and was not added to the queue.');         }	返回的錯誤代碼。 能夠使用如下常量在肯定錯誤代碼: QUEUE_LIMIT_EXCEEDED -文件數量選擇將隊列的大小經過設置的限制。 FILE_EXCEEDS_SIZE_LIMIT——文件的大小超過了設定的限制。 ZERO_BYTE_FILE——文件沒有大小。 INVALID_FILETYPE——文件類型不匹配的文件類型的限制。
'onUploadError' : function(file, errorCode, errorMsg, errorString) {             alert('The file ' + file.name + ' could not be uploaded: ' + errorString);         }	上傳錯誤時觸發  file 上傳的文件對象 errorCode 返回的錯誤代碼 errorMsg 返回的錯誤消息 errorString 人類可讀的錯誤消息包含全部的細節錯誤
<div id="progress"></div>   'onUploadProgress' : function(file, bytesUploaded, bytesTotal, totalBytesUploaded, totalBytesTotal) {             $('#progress').html(totalBytesUploaded + ' bytes uploaded of ' + totalBytesTotal + ' bytes.');         }	file 上傳的文件對象 bytesUploaded 已經上傳的字節數 單個文件 bytesTotal 文件的字節總數   單個文件   totalBytesUploaded   已經上傳的字節數   所有文件 totalBytesTotal 文件的總字節數    所有文件
'onUploadStart' : function(file) {             alert('Starting to upload ' + file.name);         }	即將上傳的對象
'onUploadSuccess' : function(file, data, response) {             alert('The file ' + file.name + ' was successfully uploaded with a response of ' + response + ':' + data);         }	file  成功上傳文件對象 data  服務器端腳本返回的數據( response 到底上傳成功了沒有若是成功爲true

    });

});

 

    </script>