【jQuery】jQuery上传插件 - uploadify

因为项目的需要，需要用到 flash 文件上传插件，找了下发现这个挺不错的，去官方下了 3.1 最新版本的，总结下使用情况。

首先，需要引入相关文件：

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

配置插件参数：

<script language="javascript">
$(document).ready(function(){
$("#upFile").uploadify({
'swf'			: 'uploadify/uploadify.swf',
'uploader'		: 'upload.php',
'buttonText'	: '选择上传图片',
'fileTypeDesc'	: 'Image Files',
'fileTypeExts'	: '*.gif; *.jpg; *.png',
'fileSizeLimit'	: '20MB',
'progressData'	: 'speed',
'queueID'		: 'fileQueue',
'onUploadSuccess' : function( file, data, response ){
if( response ) {
$("#upList").append("<img src='" + data + "' width='180' border='0' />  ");
url = $("#upUrl").val();
if ( url == '' ){
$("#upUrl").val( data );
} else {
$("#upUrl").val( url + ',' + data );
}
} else {
alert('上传发生错误');
}
}
});
});
</script>

html 部分：

<form name="upFrm" id="upFrm" method="post" action="">
<input type="file" name="upFile" id="upFile" />
<input type="text" name="upUrl" id="upUrl" size="180" />
</form>
<div id="fileQueue"></div>
<div id="upList"></div>

upload.php

<?php
if (!empty($_FILES['Filedata'])) {
$fileParts = pathinfo($_FILES['Filedata']['name']);
$returnPath = 'upfiles/'.md5($_FILES['Filedata']['name']).'.'.$fileParts['extension'];
$destFile = dirname(__FILE__).'/'.$returnPath;
if (move_uploaded_file($_FILES['Filedata']['tmp_name'],$destFile)) {
echo $returnPath;
exit();
} else {
echo '文件上传出错！';
}
}

插件属性：

auto : true // 是否自动上传，默认 true，如果为 false：（需添加上传按钮）

<a href="javascript:$('#upFile').uploadify('upload')">上传</a>

buttonClass : 添加到按钮上的样式名

buttonCursor : 'hand' // 按钮的鼠标手势，默认 'hand'，还可以是箭头 'arrow'

buttonImage : 按钮的背景图片

buttonText : 按钮上的文字

checkExisting : 检查文件是否上传

debug : false // 是否进入调试模式，默认 false

fileObjName : 'Filedata' // 文件后台表单接收名称，默认 'Filedata'

fileSizeLimit : 文件上传大小，接收的单位有B、KB、MB、GB，默认单位：KB，0 表示无限制

fileTypeDesc : 'All Files' // 上传的文件类型描述

fileTypeExts : '*.*' // 允许的文件后缀

'fileTypeExts' : '*.gif; *.jpg; *.png',

formData : 要传递的其他参数，JSON 类型

'formData'      : {'someKey' : 'someValue', 'someOtherKey' : 1},

method : 'post' // 上传的方式，默认 'post'，还可以是 'get'

multi : true // 是否允许多文件上传，默认 true

progressData : 'percentage' // 上传时显示的内容，默认 'percentage' 百分比，还可以是 'speed' 上传速度

queueID : 上传文件队列ID

queueSizeLimit : 999 // 一次可以上传的文件队列

removeCompleted : true // 是否移除已完成的文件，默认 true

removeTimeout : 3 // 已完成文件的移除延迟时间，默认 3

swf : 'uploadify.swf' // uploadify.swf 的路径

uploader : 服务端处理脚步（上传程序）

uploadLimit : 999 // 上传的最大数量，默认 999

插件事件：

onCancel : 当一个文件从队列中移除时触发

'onCancel' : function( file ){
alert('The file ' + file.name + ' was cancelled.');
}

onClearQueue : 当清空队列时触发

'onClearQueue' : function( queueItemCount ){
alert(queueItemCount + ' file(s) were removed from the queue');
}

onDialogOpen : 当对话框打开时触发

'onDialogOpen' : function(){
$('#message_box').html('The file dialog box was opened...');
}

onDialogClose : 当对话框关闭时触发

'onDialogClose' : function( queueData ){
alert(queueData.filesQueued + ' files were queued of ' + queueData.filesSelected + ' selected files. There are ' + queueData.queueLength + ' total files in the queue.');
}

onQueueComplete : 队列完成时触发

'onQueueComplete' : function( queueData ){
alert(queueData.uploadsSuccessful + ' files were successfully uploaded.');
}

onSelect : 当选择某一文件时触发

'onSelect' : function( file ){
alert('The file ' + file.name + ' was added to the queue.');
}

onUploadComplete : 当文件(单个)上传成功时触发，不管成功还是失败

'onUploadComplete' : function( file ){
alert('The file ' + file.name + ' finished processing.');
}

onUploadSuccess : 当每一个文件上传成功时触发

'onUploadSuccess' : function( file, data, response ){
alert('The file ' + file.name + ' was successfully uploaded with a response of ' + response + ':' + data);
}

插件属性：插件方法：

cancel : 取消

stop : 停止

upload : 上传