【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 : 上传