jquery 上传插件之极品 uploadify

jquery uploadify是一个很不错的文件上传插件，用jquery来操作flahs上传文件。

有如下特点

(1)兼容性强，因为是用javascript和flash，这两者都跨平台。

(2)速度快，因为用flash上传，在速度方面确实比http submit快一点(也可能是网络问题，没有进行严格比较).

(3)可以异步上传，用户友好性比较强

(4)可以实时了解上传进度和上传速度

(5)与php可以很好的结合

二，要求

(1)jQuery 1.4.x or greater.

(2)swfObject 2.2 or greater.

(3)当然你的浏览器应该有flash插件，否则一切都是浮云.

三，下载与版本选择

可以下载Uploadify-v2.1.4.zip，这是一个稳定的版本，且有完善的文档，最新版本Uploadify-v3.0.0 (Beta)

是没有文档支持的，强烈建议下载2.1.4版本

四，客户端安装与使用

（1）引用javascript和css

<link href="/uploadify/uploadify.css" mce_href="uploadify/uploadify.css" type="text/css" rel="stylesheet" />
<mce:script type="text/javascript" src="/uploadify/jquery-1.4.2.min.js" mce_src="uploadify/jquery-1.4.2.min.js"></mce:script>
<mce:script type="text/javascript" src="/uploadify/swfobject.js" mce_src="uploadify/swfobject.js"></mce:script>
<mce:script type="text/javascript" src="/uploadify/jquery.uploadify.v2.1.4.min.js" mce_src="uploadify/jquery.uploadify.v2.1.4.min.js"></mce:script>

（2）设置上传参数

<mce:script type="text/javascript"><!--
$(document).ready(function() {
$('#file_upload').uploadify({
'uploader'  : '/uploadify/uploadify.swf',
'script'    : '/uploadify/uploadify.php',
'cancelImg' : '/uploadify/cancel.png',
'folder'    : '/uploads',
'auto'      : true
});
});
// --></mce:script>

uploader 为引用上传的swf文件

script 为把文件上传到服务器后交给哪一个文件处理

cancelImg为用什么样的取消图片

folder为上传到哪一个文件夹，这一个参数可以指定，但是一般没什么用处，因为上传的服务器后一般要处理的

auto为是否自动上传，也就是你选择完后就可始上传

(3)更多参数选择

<mce:script type="text/javascript"><!--
$(document).ready(function() {
$('#div_uploaded').hide();

$('#file_upload').uploadify({
'uploader'  : '/js/uploadify/uploadify.swf',
'script'    : '/upload.php',
'cancelImg' : '/js/uploadify/cancel.png',
'folder'    : '/attachments',
'auto'      : true,
'removeCompleted':false,
'scriptData'  : {'act':'submit_file','SESSION_ID':'<?php echo $session_id ?>','member_id':'<?php echo $member_id ?>'},
'onError'     : function (event,ID,fileObj,errorObj) {
alert(errorObj.type + ' Error: ' + errorObj.info);
},
'onComplete'  : function(event, ID, fileObj, response, data) {
$('#div_uploaded').show();
$('#div_uploading').hide();
//alert('There are ' + data.fileCount + ' files remaining in the queue.'+fileObj.name);
},
'onOpen'      : function(event,ID,fileObj) {
//$('#uploader_message').text('The upload is beginning for ' + fileObj.name);
$('#div_uploaded').show();
$('#div_uploading').hide();
$('#fileTitle').val(fileObj.name);
},
'onProgress'  : function(event,ID,fileObj,data) {
var bytes = Math.round(data.bytesLoaded / 1024);
$('#' + $(event.target).attr('id') + ID).find('.percentage').text(' - ' + bytes + 'KB Uploaded');

}
});
});
// --></mce:script>

scriptData:为你要上传时带的参数，可有可无，如可有，以key/value的形式出现

onError:为一个函数，也就是在上传失败进处理的的函数.

onComplete:为一个上传完成的回调函数，可以获得文件上传的名称，大小，以及从服务器返回的数据response

onProgress:为一个函数，处理正在上传的信息，如上传速度，上传大小...

四，php处理

文件上传到服务器后给什么文件处理呢？在上面的script文件中指定了

那upload.php文件中用如下方式处理

/* 是否成功上传 */
$flag = false;
if (isset($_FILES['Filedata']['error']))
{
// 最大上传文件大小
$php_maxsize = ini_get('upload_max_filesize');
$htm_maxsize = '10M';
if ($_FILES['Filedata']['error'] == 0)
{
$flag = true;
}
elseif ($_FILES['Filedata']['error']  == 1)
{
$message = '文件太大了（最大值：'.$php_maxsize.'），无法上传。';
echo $message;
exit;

}
elseif ($_FILES['Filedata']['error']  == 2)
{
$message = '文件太大了（最大值：'.$php_maxsize.'），无法上传。';
echo $message;
exit;
}

五，安全很重要

因为这个页面没有做任何访问限制，这就会引来无数的安全问题，这可怎么办呢？

出现这个问题的根本是php页面的SESSION在此页面失效，因为flash启动上传时没有把那些cookie值传上来，

所以就算用户在别的页面已经进行了身份认证，但是他在upload.php这个页面无法访问SESSION

为了解决此问题，我们可以把一些认证参数放在scriptData数组里面，这样就可以在upload.php页面对用户进行认证了

如上面的SESSION_ID, member_id，

$session_id = empty($_REQUEST['SESSION_ID'])? 0:intval($_REQUEST['SEC_ID']);
$member_id = empty($_REQUEST['member_id'])? 0:intval($_REQUEST['member_id']);

这样我们就可以访问session_id和member_id,根据这两个值，我们是可以得到session值的