最近要做一個項目，有個部分需要用到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>