关于jquery文件上传插件 uploadify 3.1的使用

要使用uplaodify3.1，自然要下载相应的包，下载地址http://www.uploadify.com/download/，这里有两种包，一个是基于flash，免费的，一个是基于html5,需要付费，我这里所说的也是前一种。当然现在可能已经不再是3.1版本了，估计是3.2了。不过，差别不会太大！

首先在页面中引入一下文件:

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

uploadify.swf要和css放在一起，不然会找不到。

jsp页面里：

<input type="file" name="uploadify" id="uploadify" value="浏览"/>
<div id="fileQueue" style="border-top: thin solid gray;"></div>

一下是我自己的页面的代码：

<script type="text/javascript">
     $('#rightFrame').load(function(){
       var account = $("#account").val();
       var id= $("#userId").val();
       var currentNode=0;
       $("#uploadify").uploadify({
      //注:这里uploadify为html标签，文件输入框id
                    swf: 'css/uploadify.swf',
                    uploader: 'uploadfile.action;',
                    cancelImg: '/images/uploadify-cancel.png',
                    buttonText:'选择文件',
                    fileObjName :'uploadify',
                    auto: true,
                    multi:true,
                    Debug:true,
                    queueID:'fileQueue',//这里fileQueue 为上传进度条显示在哪个div里
                    formData:{'account':account,'id':id,'currentNode':$("#rightFrame").contents().find("#test").val()},
                    removeCompleted:true,
                    queueSizeLimit:999,
                    fileSizeLimit:'100MB',
                    height:28,
                    width:90,
                    successTimeout:28,
                    requeueErrors:true,
                    uploadLimit:5,
                    onUploadSuccess: function (file, data, response) {
                     if(response)
                     {
                      currentNode=data;
                        }
              },
              onQueueComplete : function(stats){
                  window.parent.rightFrame.location.href="fileaction?filenode="+currentNode;
               alert("上传完毕");
                 }
                  
             });
         });
     
     </script>

属性解释：

auto	Boolean	True	添加到队列后是否自动上传
buttonClass	String	Empty String	为Uploadify按钮添加一个类名
buttonCursor	String	“hand”	鼠标移上浏览按钮显示的鼠标样式两个值：arrow(箭头)、hand(手形)
buttonImage	String	Null	“浏览”按钮的背景图像的路径。如果使用默认的样式，你可以设置按钮悬停状态(这个选项是一个方便的选项和按钮分配图像的最佳方式是在CSS文件中。)
buttonText	String	“SELECT FILES”	显示在浏览按钮上的文本。注：若没有修改uploadify.swf的字体和uploadify.js文件的编码方式，使用中文将会是乱码
checkExisting	String
Debug	Boolean	False	设置为True打开SWFUpload调试模式。
fileObjName	String	“Filedata”	在服务器端接收文件的Form表单键名
fileSizeLimit	Number	0	允许上传文件的最大大小。这个值可以是一个数字或字符串。如果它是一个字符串，它接受一个单位(B, KB, MB, or GB)。默认单位为KB。您可以将此值设置为0 ，没有限制。
fileTypeDesc	String	“All Files”	可选的文件的说明。此字符串将出现在浏览文件对话框的文件类型下拉框中。
fileTypeExts	String	“.”	允许上传的文件扩展名。可以以英文分号隔开的多种文件扩展名。即”.jpg;.gif;” 注：如果用户手动键入文件名，将会绕过此安全级别，所以你需要在后台再次对文件名类型进行验证。
formData	JSON Object	Empty Object	一个额外的JSON对象数据，将与每个文件一起发送至服务器端。如果为动态值，请在onUploadStart()中使用settings()方法更改该JSON值
Height	Number	30	浏览按钮所显示的高度
method	String	“post”	上传文件的方式。两个值：”get”、”post”
multi	Boolean	True	设置是否为多文件上传，如果设置为False，一次将只能上传一个文件
overrideEvents	JSON Array	Empty Array	你想绕过的默认脚本的事件名称的数组。你可以告诉在文档页中的每个事件可以被重写的事件。
preventCaching	Boolean	True	一个防止Flash缓存和冲突的方式，如果设置为True，则Flash的URL将会添加一个随机数。
progressData	String	“percentage”	设置要在文件上传进度更新队列项目中显示数据的类型。两个值”percentage”(显示百分比)、” speed”(显示速度)
queueID	String	False	上传文件队列所放的元素ID，必须为ID，且不像jQuery选择器那样，它不需要加#号。如果为false，则队列会自动添加到浏览按钮下方。
queueSizeLimit	Number	999	一次可以在队列中文件的最大数目。这并不限制可以上载的文件的数目。若要限制可以上载的文件的数目，请使用 uploadLimit。如果选定要添加到队列的文件的数目超过此限制，则会触发 onSelectError 事件。
removeCompleted	Boolean	True	当文件上传完成后，是否将此文件从上传队列中清除(默认清除)。
removeTimeout	Number	3	从文件上传完成到清除此文件之间的延迟。单位：秒
requeueErrors	Boolean	False	如果设置为true，期间上传回传失误，重新排队，并多次试图上传的文件。
successTimeout	Number	30	上传成功后，将等待服务器的响应时间。在此时间后，若服务器未响应，则默认为成功(因为已经上传完成，只是等待服务器的响应)。单位：秒
swf	String	“uploadify.swf”	uploadify中的uploadify.swf的路径，可以是相对或绝对路径。相对路径为相对于当前页面路径。
uploader	String	“uploadify.php”	服务器上传脚本，即接收上传文件后台处理文件路径，可以是相对或绝对路径。相对路径为相对于当前页面路径。
uploadLimit	Number	999	允许您上传的文件的最大数量。当达到或超过这个数字， onUploadError事件被触发。
width	Number	120	浏览按钮的宽度。

需要注意的是：fileObjName属性它必须和你服务器里文件接收名一致，不然接收不到路径！

秒客网

关于jquery文件上传插件 uploadify 3.1的使用

相关文章