基于jQuery的上传插件uploadify

简单对比uploadify 2与uploadify 3 beta的使用差别
uploadify 2版本的使用方法很多，这里主要是简单对比一下两者调用上的差异。
主要是还是通过代码说话。自己在本地及远程都测试成功。

先说一下uploadify 3 beta的使用：
Html代码如下：
view plaincopy to clipboardprint?
<script type="text/javascript"> 
  $(document).ready(function() {  
    $("#fileUpload2").uploadify({  
      'swf': 'uploadify.swf',  
      'cancelImage': 'cancel.png',  
      'uploader': 'uploadify.php',  
      'checkExisting': 'check-exists.php',  
      //'scriptAccess': 'always',  
      //'folder': 'files',  
      //'multi': true,  
      'buttonText': 'Select Files',  
      "onUploadSuccess" : function(event, response, status){  
        alert(response);  
      }  
      //'checkScript': 'uploadify/check.php',  
      //'displayData': 'speed',  
      //'simUploadLimit': 2,  
        
    });  
  });  
</script> 
<fieldset style="border: 1px solid #CDCDCD; padding: 8px; padding-bottom:0px; margin: 8px 0"> 
    <legend><strong>Uploadify - Single and Multiple Sample</strong></legend> 
      
    <h2>Multiple File Upload</h2> 
    <p><?php $_SERVER['DOCUMENT_ROOT']; ?>checkScript, buttonText, simulataneous upload limit</p> 
    <div id="fileUpload2">You have a problem with your javascript</div> 
    <a href="javascript:$('#fileUpload2').uploadifyUpload()">Start Upload</a> 
      <p></p> 
 
    </fieldset> 
<script type="text/javascript">
  $(document).ready(function() {
    $("#fileUpload2").uploadify({
      'swf': 'uploadify.swf',
      'cancelImage': 'cancel.png',
      'uploader': 'uploadify.php',
      'checkExisting': 'check-exists.php',
      //'scriptAccess': 'always',
      //'folder': 'files',
      //'multi': true,
      'buttonText': 'Select Files',
      "onUploadSuccess" : function(event, response, status){
        alert(response);
      }
      //'checkScript': 'uploadify/check.php',
      //'displayData': 'speed',
      //'simUploadLimit': 2,
     
    });
  });
</script>
<fieldset style="border: 1px solid #CDCDCD; padding: 8px; padding-bottom:0px; margin: 8px 0">
    <legend><strong>Uploadify - Single and Multiple Sample</strong></legend>
   
    <h2>Multiple File Upload</h2>
    <p><?php $_SERVER['DOCUMENT_ROOT']; ?>checkScript, buttonText, simulataneous upload limit</p>
    <div id="fileUpload2">You have a problem with your javascript</div>
    <a href="javascript:$('#fileUpload2').uploadifyUpload()">Start Upload</a>
      <p></p>

    </fieldset>

然后再对比一下uploadify 2的使用：
view plaincopy to clipboardprint?
<script type="text/javascript"> 
$(function(){  
  $('#upform').hide();  
  $('#upload').click(function(){  
    $('#upform').fadeToggle();  
  });  
    
  $("#fileUpload").uploadify({  
    'uploader': 'uploadify/uploadify.swf',  
    'cancelImg': 'uploadify/cancel.png',  
    'script': 'uploadify/uploadify.php',  
    'scriptAccess': 'always',  
    'folder': '../uploadfiles',  
    'multi': true,  
    'buttonText': 'Select Files',  
    'checkScript': 'uploadify/check.php',  
    'displayData': 'speed',  
    'fileDesc': '请选择图片：jpg, jpeg, gif, png',  
    'fileExt': '*.jpg;*.jpeg;*.gif;*.png',  
    'simUploadLimit': 2,  
    'onComplete': function(event, ID, fileObj, response, data){  
        
    }  
  });  
});  
 
</script> 
<div id="fileUpload">You have a problem with your javascript</div> 
<a href="javascript:$('#fileUpload').uploadifyUpload()">Start Upload</a> 
<script type="text/javascript">
$(function(){
  $('#upform').hide();
  $('#upload').click(function(){
    $('#upform').fadeToggle();
  });
 
  $("#fileUpload").uploadify({
    'uploader': 'uploadify/uploadify.swf',
    'cancelImg': 'uploadify/cancel.png',
    'script': 'uploadify/uploadify.php',
    'scriptAccess': 'always',
    'folder': '../uploadfiles',
    'multi': true,
    'buttonText': 'Select Files',
    'checkScript': 'uploadify/check.php',
    'displayData': 'speed',
    'fileDesc': '请选择图片：jpg, jpeg, gif, png',
    'fileExt': '*.jpg;*.jpeg;*.gif;*.png',
    'simUploadLimit': 2,
    'onComplete': function(event, ID, fileObj, response, data){
     
    }
  });
});

</script>
<div id="fileUpload">You have a problem with your javascript</div>
<a href="javascript:$('#fileUpload').uploadifyUpload()">Start Upload</a>

在选项的名称上以及调用的函数名上，相比2版，都有了很大的变动。不过官方的使用说明还没有出来，只有作者网站的一篇简单的说明：

引用

For those of you who have been having issues with v2.x.x and want to update to v3.0 beta, here are some quick tips as to the changes made in the code...

First off, the folder option is no longer there. It's more secure to do it in the PHP code so now it's required to do so.

Secondly, the names of some of the events changed to be more descriptive. Here is a list of the event names:
onClearQueue, onDialogOpen, onDialogClose, onInit, onQueueComplete, onSelectError, onSelect, onSWFReady, onUploadCancel, onUploadComplete, onUploadError, onUploadProgress, onUploadStart

You'll notice some of them just have "upload" appended to them.

Everything else is pretty much the same, except for the default button. It's no longer created in flash, but as a CSS3 button behind the invisible flash element. This makes it easier to style to your liking.

Hope this helps those of you who are trying to use v3.0b until I can write out all the documentation.

基于jQuery的上传插件uploadify
jQuery Uploadify 是一个强有力的而且可以高度自定义的文件上传插件，它是基于jQuery 和 SWFUpload 来开发的，支持进度条显示，实现的效果非常不错。可以见下图：

• 
  Uploadify 的官方网站：http://www.uploadify.com
• Uploadify 的演示地址：http://www.uploadify.com/demos/
• Uploadify 的下载地址：http://www.uploadify.com/download/

从Uploadify 的下载页面上，可以看到当前的版本已经是Uploadify-v3.0.0 (Beta)，但是还是一个Beta版，所以目前来说网站上的文档主要是针对 uploadify v2.14 的。所以这里就不多介绍老版本的文档了，主要说一下Uploadify3.0 的一些用法。

Uploadify 的v3.0 和老版本还是有很大的差别的，虽然从演示上来看基本上一样，但是jquery调用uploadify的时候，一些很重要的参数名字都变了。在演示上的差别，老版本是把按钮的样式放在flash里，而v3.0把按钮的样式和flash 分开了，定义起来更加自由。

下面来说一下v3.0 的使用方法和有哪些参数上变化：

使用方法：


<html>
<head>
<link href="/uploadify/uploadify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="/uploadify/jquery-1.5.1.js"></script>
<script type="text/javascript" src="/uploadify/swfobject.js"></script>
<script type="text/javascript" src="/uploadify/jquery.uploadify.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#file_upload').uploadify({
'uploader' : '/uploadify/uploadify.php',
'swf' : '/uploadify/uploadify.swf',
'cancelImage' : '/uploadify/uploadify-cancel.png',
'auto' : true
});
});
</script>
</head>
<body>
<input id="file_upload" name="file_upload" type="file" />
</body>
</html>

在页面中首先要uploadify 依赖的两个js 库：jquery 和 swfobject， 然后再加入从网上下载的 jquery.uploadify.js。 到目前为止，准备工作已经就绪，下面开始使用 jQuery.uploadify() 函数。传入指定的参数后，uploadify 就会按照你的要求来工作了。

Uploadify v3.0的参数详解

下面的参数参数是必须的，当然插件也已经给他们赋上了必要的默认值

id       : jQuery(this).attr('id'), // 根据页面上绑定的对象来给uploadify设置id
swf      : 'uploadify.swf', // uploadify的上传功能是通过flash 来实现的，swf 是用来设置这个flash 的位置，这个flash 可以在下载的插件包里找到
uploader : 'uploadify.php', // 这个参数是当文件上传完以后调用的ＰＨＰ代码的地址

下面的参数是可选的
// Options
auto : false,　　　　// 设置选完文件是否自动上传
buttonClass     : '', // 可以为按钮自定义样式
buttonCursor    : 'hand', // 设置档鼠标移动到flash 上显示的图标
buttonImage     : false, // 设置按钮的图片
buttonText      : 'SELECT FILES', // 设置按钮上显示的文本
cancelImage     : 'uploadify-cancel.png', // 设置取消按钮的图片
checkExisting   : 'uploadify-check-existing.php', // 检查上传的文件时候已经存在
debug           : false, // uploadify de调试程序是否开启
fileObjName     : 'Filedata',
fileSizeLimit   : 0, // 设置文件的上传的大小，0为无穷大
fileTypeDesc    : 'All Files (*.*)',
fileTypeExts    : '*.*', // 设置文件上传时的文件类型
height          : 30, // 设置flash 的高度
method          : 'post', // 设置提交的方法
multi           : false, // 是否支付多文件一起上传
queueID         : false, //
queueSizeLimit  : 999,
removeCompleted : true,
removeTimeout   : 3,
requeueErrors   : false,
postData        : {}, // 设置上传是需要传入的参数
preventCaching  : true,
progressData    : 'percentage',
// simUploadLimit  : 1, // Not possible with swfUpload
successTimeout  : 30,
transparent     : true,
uploadLimit     : 999,
uploaderType    : 'html5', // the other option is 'flash' // 设置上传组件的类型
width           : 120, // 设置flash 的高度