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值的