|
說到Uploadify，不用說網(wǎng)絡(luò)上很多人都在用,，這可是個非常強大的上傳插件,，但遺憾的是的其html5版是收費的,，5刀,，需要的可以去其官方網(wǎng)站下載。屌絲的jQ酷只能講下swf版了,，這個是免費的,，功能很強大，缺點就是不支持水果,。
Uploadify內(nèi)置了許多參數(shù),，方法，事件等,，使用起來方便快捷,，官方有詳細的方檔，當(dāng)然都是英文的,，嘻嘻,。至于Uploadify有多強大，就不說了,，親自驗證吧,，本文講解的Uploadify 3.2.1版，咱們就來詳細的了解下各項參數(shù)吧,。
jquery實例：Uploadify使用詳解
引入核心文件
1 2 3 | <link rel="stylesheet" type="text/css" href="uploadify.css" />
<script type="text/javascript" src="http://code./jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="/jquery.uploadify-3.1.min.js"></script>
|
構(gòu)建html
1 | <input type="file" name="file_upload" id="file_upload" />
|
寫入JS
1 2 3 4 5 6 7 | $(function() {
$('#file_upload').uploadify({
'swf' : 'uploadify.swf',// uploadify.swf 文件的相對JS文件的路徑
'uploader' : 'uploadify.php'//后臺處理程序的相對路徑
// 更多的參數(shù)
});
});
|
基礎(chǔ)的實例代碼
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <!DOCTYPE html>
<html>
<head>
<title>My Uploadify Implementation</title>
<link rel="stylesheet" type="text/css" href="uploadify.css">
<script type="text/javascript" src="http://code./jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery.uploadify-3.1.min.js"></script>
<script type="text/javascript">
$(function() {
$('#file_upload').uploadify({
'swf' : 'uploadify.swf',
'uploader' : 'uploadify.php'
// Your options here
});
});
</script>
</head>
<body>
<input type="file" name="file_upload" id="file_upload" />
</body>
</html>
|
參數(shù)
auto:布爾類型,，設(shè)置為true時，選擇文件后將自動上傳,，設(shè)置為false則需要調(diào)用上傳方法觸發(fā),以下為實例代碼,，下文就不寫完整的代碼了，親們照著添加上去就可以了,。
1 2 3 4 5 6 7 | $(function() {
$("#file_upload").uploadify({
'auto' : true,
'swf' : '/uploadify/uploadify.swf',
'uploader' : '/uploadify/uploadify.php'
});
});
|
buttonClass：設(shè)置按鈕的樣式類,，注意：樣式的hover也設(shè)置下。
1 | 'buttonClass' : 'some-class',//自定義的樣式類名
|
buttonCursor：默認值為hand,，定義鼠標懸浮于按鈕時的樣式
1 | 'buttonCursor' : 'arrow',
|
buttonImage:默認值null,，定義按鈕的背景圖片，同時需定義下按鈕的CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <style type="text/css">
.uploadify-button {
background-color: transparent;
border: none;
padding: 0;
}
.uploadify:hover .uploadify-button {
background-color: transparent;
}
</style>
<input type="file" name="file_upload" id="file_upload" />
$(function() {
$("#file_upload").uploadify({
'buttonImage' : '/uploadify/browse-btn.png',
'swf' : '/uploadify/uploadify.swf',
'uploader' : '/uploadify/uploadify.php'
});
});
|
buttonText：默認值SELECT FILES,，定義按鈕的文字
checkExisting：默認值false,，定義后臺檢測文件是否存的程序，存在返回1,，不存在返回0
1 | 'checkExisting' : '/uploadify/check-exists.php',
|
debug：布爾值,，默認值false,，如設(shè)置為true開始debug模式
fileObjName：默認值Filedata,，服務(wù)端調(diào)用的上傳項的名稱，以PHP為例,，如果此項設(shè)置為the_files,，那么在服務(wù)端獲取時使用$_FILES['the_files'],。
1 | 'fileObjName' : 'the_files',
|
fileSizeLimit：限制上傳文件的大小，默認單位KB,，可以是B, KB, MB, or GB,，設(shè)為0則不限制大小。
1 | 'fileSizeLimit' : '100KB',
|
fileTypeDesc：默認值：All Files,，可選的文件類型,，這個字符串出現(xiàn)在瀏覽文件對話框的文件類型下拉列表中。
1 | 'fileTypeDesc' : 'Image Files',
|
fileTypeExts:默認值*.*,，定義可以上傳的文件類型
1 2 | 'fileTypeDesc' : 'Image Files',
'fileTypeExts' : '*.gif; *.jpg; *.png',
|
formData：JSON類型,，默認為Empty Object包含額外數(shù)據(jù)的JSON對象，在上傳文件時通過POST或get方式發(fā)送給服務(wù)端,。如PHP可通過$_GET or $_POST 來獲取,。
1 | 'formData' : {'someKey' : 'someValue', 'someOtherKey' : 1},
|
height：默認30，單位像素,，上傳按鈕的高度
itemTemplate：默認值false,，指定一個html模板給每個上傳返回的數(shù)據(jù)，并添加上queue中,。這里有的個變量需設(shè)置,。
instanceID：Uploadify實例ID，fileID：加入到queue的文件ID,，fileName：加入到queue的文件名,fileSize：加入到queue的文件大小,。模板中變量這樣使用${fileName}，具體代碼如下
1 2 3 4 5 6 | 'itemTemplate' : '<div id="${fileID}" class="uploadify-queue-item">\
<div class="cancel">\
<a href="javascript:$(\'#${instanceID}\').uploadify(\'cancel\', \'${fileID}\')">X</a>\
</div>\
<span class="fileName">${fileName} (${fileSize})</span><span class="data"></span>\
</div>'
|
method：默認值post,，表單提交的方式,。
multi：默認值true，是否允許多文件上傳,。
overrideEvents：默認值Empty Array,，接受一個JSON數(shù)組，把想重寫的事件名稱寫到數(shù)組內(nèi)即可進行重寫,。
1 | 'overrideEvents' : ['onUploadProgress'],
|
preventCaching：默認為true,，為真時一個隨機數(shù)將會添加上SWF文件的URL上，這樣就不會被緩存,。
1 | 'preventCaching' : false,
|
progressData：默認值percentage,，上傳數(shù)據(jù)時有queue顯示的進度顯示方式，兩個類型percentage’ 和 ‘speed’.
1 | 'progressData' : 'speed',
|
queueID：默認值false,，queue DOM元素的ID,，如果設(shè)為false，將生成一個文件隊列和queueID將被動態(tài)設(shè)置
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <style type="text/css">
#some_file_queue {
background-color: #FFF;
border-radius: 3px;
box-shadow: 0 1px 3px rgba(0,0,0,0.25);
height: 103px;
margin-bottom: 10px;
overflow: auto;
padding: 5px 10px;
width: 300px;
}
</style>
<div id="some_file_queue"></div>
<input type="file" name="file_upload" id="file_upload" />
|
1 2 3 4 5 6 7 | $(function() {
$("#file_upload").uploadify({
'queueID' : 'some_file_queue',
'swf' : '/uploadify/uploadify.swf',
'uploader' : '/uploadify/uploadify.php'
});
});
|
queueSizeLimit：默認值999,，容納文件隊列的最大數(shù)
removeCompleted：默認值true,，設(shè)置為false時,，queue顯示的結(jié)果一直顯示。
1 | 'removeCompleted' : false,
|
removeTimeout：默認值3,，單位秒,。文件上傳完后延時隱藏queue隊列。
requeueErrors：默認值false,，設(shè)為真時,，上傳出錯時將返回錯誤信息，并再次重試上傳,。
1 2 3 4 5 6 7 8 9 10 | $(function() {
$("#file_upload").uploadify({
'requeueErrors' : true,
'swf' : '/uploadify/uploadify.swf',
'uploader' : '/uploadify/not_here.php',
'onUploadStart' : function(file) {
console.log('Attempting to upload: ' + file.name);
}
});
});
|
successTimeout：默認值30秒,，文件上傳完成時等待服務(wù)器響應(yīng)的時間，之后顯示成功信息,。
swf：默認值uploadify.swf,，uploadify.swf的相對路徑。
1 | 'swf' : '/uploadify/uploadify.swf',
|
uploader：后臺處理程序的相對路徑,，默認值uploadify.php
1 | 'uploader' : '/uploadify/uploadify.php'
|
uploadLimit：默認值999,，上傳的最大文件數(shù)
width：默認值120，單位為像素,，上傳按鈕的寬度
事件
onCancel：文件從隊列中移除時觸發(fā)
1 2 | <input type="file" name="file_upload" id="file_upload" />
<a href="javascript:$('#file_upload').uploadify('upload')">Upload Files</a>
|
1 2 3 4 5 6 7 8 9 10 | $(function() {
$("#file_upload").uploadify({
'auto' : false,
'swf' : '/uploadify/uploadify.swf',
'uploader' : '/uploadify/uploadify.php',
'onCancel' : function(file) {
alert('The file ' + file.name + ' was cancelled.');
}
});
});
|
onClearQueue：在cancel方法被傳參“*”調(diào)用時觸發(fā)
1 2 | <input type="file" name="file_upload" id="file_upload" />
<a href="javascript:$('#file_upload').uploadify('cancel','*');">Clear Queue</a>
|
1 2 3 4 5 6 7 8 9 10 | $(function() {
$("#file_upload").uploadify({
'auto' : false,
'swf' : '/uploadify/uploadify.swf',
'uploader' : '/uploadify/uploadify.php',
'onClearQueue' : function(queueItemCount) {
alert(queueItemCount + ' file(s) were removed from the queue');
}
});
});
|
onDestroy：在調(diào)用 destroy方法時觸發(fā)
1 2 | <input type="file" name="file_upload" id="file_upload" />
<a href="javascript:$('#file_upload').uploadify('destroy')">Destroy Uploadify</a>
|
1 2 3 4 5 6 7 8 9 | $(function() {
$("#file_upload").uploadify({
'swf' : '/uploadify/uploadify.swf',
'uploader' : '/uploadify/uploadify.php',
'onDestroy' : function() {
alert('I am getting destroyed!');
}
});
});
|
onDialogClose：在文件對話框關(guān)閉時觸發(fā),。參數(shù)為一個對象queueData，內(nèi)有5個參數(shù)：
filesSelected,，對話框中選中的文件數(shù),，
filesQueued添加到隊列的文件數(shù)，
filesReplaced隊列中被取代的文件數(shù),，
filesCancelled添加到隊列后被刪除的文件數(shù),，
filesErrored錯誤文件數(shù)
1 2 3 4 5 6 7 8 9 10 11 | $(function() {
$("#file_upload").uploadify({
'fileSizeLimit' : '50KB',
'overrideEvents' : ['onDialogClose'],
'swf' : '/uploadify/uploadify.swf',
'uploader' : '/uploadify/uploadify.php',
'onDialogClose' : function(queueData) {
alert(queueData.filesQueued + ' files were queued of ' + queueData.filesSelected + ' selected files. There are ' + queueData.queueLength + ' total files in the queue.');
}
});
});
|
onDialogOpen：在文件對話框打開時觸發(fā)
1 2 | <input type="file" name="file_upload" id="file_upload" />
<div id="message_box"></div>
|
1 2 3 4 5 6 7 8 9 | $(function() {
$("#file_upload").uploadify({
'swf' : '/uploadify/uploadify.swf',
'uploader' : '/uploadify/uploadify.php',
'onDialogOpen' : function() {
$('#message_box').html('The file dialog box was opened...');
}
});
});
|
onDisable：實例調(diào)用disable方法時觸發(fā)
1 2 | <input type="file" name="file_upload" id="file_upload" />
<a href="javascript:$('#file_upload').uploadify('disable', true);">Disable Uploadify</a>
|
1 2 3 4 5 6 7 8 9 | $(function() {
$("#file_upload").uploadify({
'swf' : '/uploadify/uploadify.swf',
'uploader' : '/uploadify/uploadify.php',
'onDisable' : function() {
alert('You have disabled Uploadify!');
}
});
});
|
onEnable：當(dāng)Uploadify按鈕激活并調(diào)用disable方法時觸發(fā)
1 2 | <input type="file" name="file_upload" id="file_upload" />
<a href="javascript:$('#file_upload').uploadify('disable', false);">Enable Uploadify</a>
|
1 2 3 4 5 6 7 8 9 10 | $(function() {
$("#file_upload").uploadify({
'swf' : '/uploadify/uploadify.swf',
'uploader' : '/uploadify/uploadify.php',
'onEnable' : function() {
alert('You can use Uploadify again.');
}
});
$('#file_upload').uploadify('disable', true);
});
|
onFallback：當(dāng)瀏覽器的FLASH版本不兼容時觸發(fā)
1 2 3 4 5 6 7 8 9 | $(function() {
$("#file_upload").uploadify({
'swf' : '/uploadify/uploadify.swf',
'uploader' : '/uploadify/uploadify.php',
'onFallback' : function() {
alert('Flash was not detected.');
}
});
});
|
onInit：在Uploadify初始化后觸發(fā)
1 2 3 4 5 6 7 8 9 | $(function() {
$("#file_upload").uploadify({
'swf' : '/uploadify/uploadify.swf',
'uploader' : '/uploadify/uploadify.php',
'onInit' : function(instance) {
alert('The queue ID is ' + instance.settings.queueID);
}
});
});
|
onQueueComplete：在文件隊列完成時觸發(fā)，傳參數(shù)對象queueData,，uploadsSuccessful成功傳送的文件數(shù)量,，uploadsErrored上傳出錯的文件數(shù)量。
1 2 3 4 5 6 7 8 9 | $(function() {
$("#file_upload").uploadify({
'swf' : '/uploadify/uploadify.swf',
'uploader' : '/uploadify/uploadify.php',
'onQueueComplete' : function(queueData) {
alert(queueData.uploadsSuccessful + ' files were successfully uploaded.');
}
});
});
|
onSelect：當(dāng)對話框的文件被選中時觸發(fā)
1 2 3 4 5 6 7 8 9 | $(function() {
$("#file_upload").uploadify({
'swf' : '/uploadify/uploadify.swf',
'uploader' : '/uploadify/uploadify.php',
'onSelect' : function(file) {
alert('The file ' + file.name + ' was added to the queue.');
}
});
});
|
onSelectError：選擇文件出錯時觸發(fā),，此處有三個參數(shù),，
file出錯的文件對象。
errorCode,，錯誤代碼：QUEUE_LIMIT_EXCEEDED,，文件大小超出了推送到文件隊列的限制值。FILE_EXCEEDS_SIZE_LIMIT文件大小超出了上傳限制值,。ZERO_BYTE_FILE,，沒大小的文件。INVALID_FILETYPE，文件類型符合,。
errorMsg：沒有重寫默認事件的情況下，可使用this.queueData.errorMsg返回詳細的錯誤信息,。
1 2 3 4 5 6 7 8 9 10 | $(function() {
$("#file_upload").uploadify({
'fileSizeLimit' : '50KB',
'swf' : '/uploadify/uploadify.swf',
'uploader' : '/uploadify/uploadify.php',
'onSelectError' : function() {
alert('The file ' + file.name + ' returned an error and was not added to the queue.');
}
});
});
|
onSWFReady：Flash對象加載完成時觸發(fā)
1 2 3 4 5 6 7 8 9 | $(function() {
$("#file_upload").uploadify({
'swf' : '/uploadify/uploadify.swf',
'uploader' : '/uploadify/uploadify.php',
'onSWFReady' : function() {
alert('The Flash file is ready to go.');
}
});
});
|
onUploadComplete：在每個文件上傳完成時觸發(fā),，無論成功還是出錯。如果你想知道上傳成功還是出錯,，請使用 onUploadSuccess和onUploadError 事件,。
file，無論成功還是錯誤的上傳文件對象,。
1 2 3 4 5 6 7 8 9 | $(function() {
$("#file_upload").uploadify({
'swf' : '/uploadify/uploadify.swf',
'uploader' : '/uploadify/uploadify.php',
'onUploadComplete' : function(file) {
alert('The file ' + file.name + ' finished processing.');
}
});
});
|
onUploadError：上傳出錯時觸發(fā),，其速有4個參數(shù)：
file：上傳的文件對象
errorCode：返回的錯誤代碼
errorMsg：返回的錯誤信息
errorString：易讀的詳細錯誤信息
1 2 3 4 5 6 7 8 9 | $(function() {
$("#file_upload").uploadify({
'swf' : '/uploadify/uploadify.swf',
'uploader' : '/uploadify/uploadify-not-existing.php',
'onUploadError' : function(file, errorCode, errorMsg, errorString) {
alert('The file ' + file.name + ' could not be uploaded: ' + errorString);
}
});
});
|
onUploadProgress：每次文件上傳進度更新時觸發(fā)，還有5個參數(shù)
file：上傳的文件對象
bytesUploaded：已上傳的文件字節(jié)數(shù)
bytesTotal：文件的總字節(jié)數(shù)
totalBytesUploaded：所有文件中當(dāng)前已上傳的總字節(jié)數(shù)
totalBytesTotal：所有上傳文件的總字節(jié)數(shù)
1 2 | <input type="file" name="file_upload" id="file_upload" />
<div id="progress"></div>
|
1 2 3 4 5 6 7 8 9 | $(function() {
$("#file_upload").uploadify({
'swf' : '/uploadify/uploadify.swf',
'uploader' : '/uploadify/uploadify.php',
'onUploadProgress' : function(file, bytesUploaded, bytesTotal, totalBytesUploaded, totalBytesTotal) {
$('#progress').html(totalBytesUploaded + ' bytes uploaded of ' + totalBytesTotal + ' bytes.');
}
});
});
|
onUploadStart：在文件上傳之前觸發(fā)
1 2 3 4 5 6 7 8 9 | $(function() {
$("#file_upload").uploadify({
'swf' : '/uploadify/uploadify.swf',
'uploader' : '/uploadify/uploadify.php',
'onUploadStart' : function(file) {
alert('Starting to upload ' + file.name);
}
});
});
|
onUploadSuccess：上傳成功后觸發(fā),，還3個參數(shù)
file：上傳成功的文件對象
data：服務(wù)端返回的數(shù)據(jù)
response：響應(yīng)服務(wù)端返回的成功信息true,，如返回false，則在successTimeout后呈現(xiàn)響應(yīng),。
1 2 3 4 5 6 7 8 9 | $(function() {
$("#file_upload").uploadify({
'swf' : '/uploadify/uploadify.swf',
'uploader' : '/uploadify/uploadify.php',
'onUploadSuccess' : function(file, data, response) {
alert('The file ' + file.name + ' was successfully uploaded with a response of ' + response + ':' + data);
}
});
});
|
方法
cancel：從隊列中取消一個文件或文件的進度,，帶兩個參數(shù)
fileID：想取消的文件ID，可以輸入任意數(shù)量的文件id作為參數(shù),。如果輸入“*”作為第一個參數(shù),隊列中的所有文件將被取消,。如果沒有設(shè)置文件ID作為參數(shù),在隊列中第一個文件將被取消。
suppressEvent：如果設(shè)置為真,那么onUploadCancel事件將被禁止,。這在清除隊列時很有用,。
1 2 | <input type="file" name="file_upload" id="file_upload" />
<a href="javascript:$('#file_upload').uploadify('cancel')">Cancel First File</a> | <a href="javascript:$('#file_upload').uploadify('cancel', '*')">Clear the Queue</a> | <a href="javascript:$('#file_upload').uploadify('upload', '*')">Upload the Files</a>
|
1 2 3 4 5 6 7 | $(function() {
$("#file_upload").uploadify({
'auto' : false,
'swf' : '/uploadify/uploadify.swf',
'uploader' : '/uploadify/uploadify.php'
});
});
|
destroy：摧毀Uploadify實例，并返回上傳文件到其原始狀態(tài)
1 2 | <input type="file" name="file_upload" id="file_upload" />
<a href="javascript:$('#file_upload').uploadify('destroy')">Destroy Uploadify</a>
|
disable：禁用或啟用上傳按鈕
1 2 | <input type="file" name="file_upload" id="file_upload" />
<a href="javascript:$('#file_upload').uploadify('disable', true)">Disable the Button</a> | <a href="javascript:$('#file_upload').uploadify('disable', false)">Enable the Button</a>
|
setting:返回或更新Uploadify實例的設(shè)置,，三個參數(shù)：
name：設(shè)置選項的名稱,，如果只設(shè)置了此名稱則返回該名稱的值
value：設(shè)置選項的值
resetObjects：設(shè)置為true時，將更新postData對象,，并替換已有的值,，否則新值將添加到現(xiàn)有的postData對象中
1 2 | <input type="file" name="file_upload" id="file_upload" />
<a href="javascript:changeBtnText()">Change the Button Text</a> | <a href="javascript:returnBtnText();">Read the Button</a>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | $(function() {
$("#file_upload").uploadify({
'swf' : '/uploadify/uploadify.swf',
'uploader' : '/uploadify/uploadify.php'
});
});
function changeBtnText() {
$('#file_upload').uploadify('settings','buttonText','BROWSE');
}
function returnBtnText() {
alert('The button says ' + $('#file_upload').uploadify('settings','buttonText'));
}
|
stop:停止當(dāng)前的上傳和文件隊列的任何進度
1 2 | <input type="file" name="file_upload" id="file_upload" />
<a href="javascript:$('#file_upload').uploadify('upload', '*')">Upload the Files</a> | <a href="javascript:$('#file_upload').uploadify('stop')">Stop the Uploads!</a>
|
1 2 3 4 5 6 7 | $(function() {
$("#file_upload").uploadify({
'auto' : false,
'swf' : '/uploadify/uploadify.swf',
'uploader' : '/uploadify/uploadify.php'
});
});
|
upload:上傳特定文件或文件隊列中的所有文件，參數(shù)
fileID：你想上傳的文件的ID,，最簡單的方法就是使用ID屬性,，如果‘*’作為第一個也是唯一一個傳遞參數(shù),將上傳隊列中的所有文件。
1 2 | <input type="file" name="file_upload" id="file_upload" />
<a href="javascript:$('#file_upload').uploadify('upload','*')">Upload Files</a>
|
1 2 3 4 5 6 7 | $(function() {
$("#file_upload").uploadify({
'auto' : false,
'swf' : '/uploadify/uploadify.swf',
'uploader' : '/uploadify/uploadify.php'
});
});
|
關(guān)于自定義服務(wù)端的上傳程序：
自定義服務(wù)端上傳程序uploadify只需回返回一個字符串就OK了,，如果上傳成功就返回1,，上傳失敗就返回錯誤信息。以下以thinkphp的上傳類來說下,。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | public function upload(){
$upload = new \Think\Upload();// 實例化上傳類
$upload->maxSize = 3145728 ;// 設(shè)置附件上傳大小
$upload->exts = array('jpg', 'gif', 'png', 'jpeg');// 設(shè)置附件上傳類型
$upload->rootPath = './Uploads/'; // 設(shè)置附件上傳根目錄
$upload->savePath = ''; // 設(shè)置附件上傳（子）目錄
// 上傳文件
$info = $upload->upload();
if(!$info) {// 上傳錯誤提示錯誤信息
echo($upload->getError());
}else{// 上傳成功
echo(1);
}
}
|
轉(zhuǎn)載請注明：jQ酷 ? 強大的jquery上傳插件SWF版Uploadify參數(shù)詳解
|
