好用的Uploadify 3.0－Life Live Love

最近再研究Uploadify, 他是一套結合jQuery可以批次上傳的套件! 個人覺得還蠻好用的

不過當在使用的時候發現了一些奇怪的現象,而且怎麼樣都無法上傳

Google了之後也發現大家討論的問題是Session,Cookie無法共用 (嗯..這好像跟我的情況不同)

後來才發現官網的說明文件是針對Uploadify 2.x所撰寫的,我所使用的是3.0...

加上自己沒有仔細看說明...就白白花了我一整個下午的時間再找問題了>"<

先來說明一下3.0 的使用方法,首先從官網下載 uploadify-v3.0.0,並解壓縮

把解壓縮檔案放在相同的路徑,並新增一個上傳檔案的頁面~

include 代碼如下:

<link rel="stylesheet" type="text/css" href="uploadify.css" />  
<script type="text/javascript" src="jquery.min.js"></script> 
<script type="text/javascript" src="jquery.uploadify.js"></script>

Javascript 代碼如下:

<script language="javascript">
$(function() {

$('#custom_file_upload').uploadify({
  'swf'            	: 'uploadify.swf',
  'uploader'       	: 'uploadify.php',    
  'cancelImg'      	: 'cancel.png',
  'folder'         	: 'uploads',
  'multi'  		: true,
  'auto'     		: true,
  'fileExt'        	: '*.jpg;*.gif;*.png',
  'fileDesc'       	: 'Image Files (.JPG, .GIF, .PNG)',
  'queueID'        	: 'custom-queue',
  'queueSizeLimit' 	: 3,
  'simUploadLimit' 	: 3,
  'removeCompleted'	: false,
  'onSelect'  : function(event,data) {
      $('#status-message').text(data.filesSelected + ' files have been added to the queue.');
    },
  'onUploadComplete' : function(event,data) {    
      $('#status-message').text(data.filesUploaded + ' files uploaded, ' + data.errors + ' errors.');
    }
});                
});

</script>

HTML代碼如下:

<div class="demo-box"> 
<div id="status-message">Select some files to upload:</div>
<div id="custom-queue"></div>
<input id="custom_file_upload" type="file" name="Filedata" /></div> 
</div>

功能	2.x	3.x
flash uploader路徑	uploader	swf
後台處理程序的相對路徑	script	uploader
在後台處理程序中根據該名稱來取得上傳文件的資訊	fileDataName	fileObjName
這個屬性值必須設置fileExt屬性後才有效，用來設置選擇文件對話框中的提示內容	fileDesc	fileTypeDesc
設置可以選擇的上傳文件的類型	fileExt	fileTypeExts
文件上傳完成後觸發的事件	onAllComplete	onUploadComplete