基于jquery的上传插件Uploadify.doc

看到一款基于jquery的上传插件Uploadify无论在功能、外观、可用性和扩展性上都有不错表现，于是研究了一番，介绍给大家。简介Uploadify简单说来，是基于Jquery的一款文件上传插件。它的功能特色总结如下：支持单文件或多文件上传，可控制并发上传的文件数 在服务器端支持各种语言与之配合使用，诸如PHP,.NET,Java 通过参数可配置上传文件类型及大小限制 通过参数可配置是否选择文件后自动上传 易于扩展，可控制每一步骤的回调函数（onSelect, onCancel） 通过接口参数和CSS控制外观 更多 相关链接Uploadify主页地址：/ 在该页面你可以了解到关于他的更多内容。Uploadify在线演示：在线DemoUploadify配置参数及接口文档：/documentationUploadify插件下载地址：/download使用方法下载插件安装包后，可以看到里面的几个主要文件：jquery.uploadify.js（完成上传功能的脚本文件，在调用页面引用）、uploadify.css（外观样式表）、uploader.swf（上传控件的主体文件，flash控件）、upload.php（服务器端处理文件，官方仅提供了php版的） 引用了插件文件后，在页面中做如下调用： /声明一个普通的html文件上传控件，并指定id/将声明的普通上传控件与Uploadify插件绑定$(document).ready(function() $(#fileInput).fileUpload (/以下参数均是可选uploader: uploader.swf, /指定上传控件的主体文件，默认uploader.swfscript: upload.php, /指定服务器端上传处理文件，默认upload.phpcancelImg : cancel.png, /指定取消上传的图片，默认cancel.pngauto: true, /选定文件后是否自动上传，默认falsefolder: /uploads /要上传到的服务器路径，默认/muti : true, /是否允许同时上传多文件，默认falsefileDesc : rar文件或zip文件/出现在上传对话框中的文件类型描述fileExt : *.rar;*.zip,/控制可上传文件的扩展名，启用本项时需同时声明fileDescsizeLimit: 86400 /控制上传文件的大小，单位bytesimUploadLimit :5 /多文件上传时，同时上传文件数目限制););上面列出了我认为常用的配置选项，此外还有很多参数可配置，参考官方文档通过调用相关功能函数，声明功能按钮。例如声明上传功能按钮（自动上传时不需要）： 上传文件声明取消多文件上传时上传队列：取消上传队列 jquery.Uploadify部分参数的介绍，API的中文解释以以使用例子以下附上Uploadify部分参数的介绍：uploader ： uploadify.swf 文件的相对路径，该swf文件是一个带有文字BROWSE的按钮，点击后弹出打开文件对话框，默认值：uploadify.swf。script ： 后台处理程序的相对路径 。默认值：uploadify.phpcheckScript ：用来判断上传选择的文件在服务器是否存在的后台处理程序的相对路径fileDataName ：设置一个名字，在服务器处理程序中根据该名字来取上传文件的数据。默认为Filedatamethod ： 提交方式Post 或Get 默认为PostscriptAccess ：flash脚本文件的访问模式，如果在本地测试设置为always，默认值：sameDomainfolder ： 上传文件存放的目录 。queueID ： 文件队列的ID，该ID与存放文件队列的div的ID一致。queueSizeLimit ： 当允许多文件生成时，设置选择文件的个数，默认值：999 。multi ： 设置为true时可以上传多个文件。auto ： 设置为true当选择文件后就直接上传了，为false需要点击上传按钮才上传 。fileDesc ： 这个属性值必须设置fileExt属性后才有效，用来设置选择文件对话框中的提示文本，如设置fileDesc为“请选择rar doc pdf文件”，打开文件选择框效果如下图：fileExt ： 设置可以选择的文件的类型，格式如：*.doc;*.pdf;*.rar 。sizeLimit ： 上传文件的大小限制 。simUploadLimit ： 允许同时上传的个数 默认值：1 。buttonText ： 浏览按钮的文本，默认值：BROWSE 。buttonImg ： 浏览按钮的图片的路径 。hideButton ： 设置为true则隐藏浏览按钮的图片 。rollover ： 值为true和false，设置为true时当鼠标移到浏览按钮上时有反转效果。width ： 设置浏览按钮的宽度 ，默认值：110。height ： 设置浏览按钮的高度 ，默认值：30。wmode ： 设置该项为transparent 可以使浏览按钮的flash背景文件透明，并且flash文件会被置为页面的最高层。 默认值：opaque 。cancelImg ：选择文件到文件队列中后的每一个文件上的关闭按钮图标Uploadify还自带了很多参数及有用的方法和回调函数，都在API里，虽然是全英文的，但很容易看懂，这里就不说了。以下是我用到的代码，可以参考一下：使用例子:Copy code1、 $(document).ready(function() $(#uploadify).uploadify( uploader : images/uploadify.swf, script : /content/ImportScheduleCommitAction.do, cancelImg: images/cancel.png, folder : /, queueID: fileQueue, fileDataName : uploadify, fileDesc : 支持格式:xls.,fileExt: *.xls, auto : false, multi: true, height : 20, width: 50, simUploadLimit : 3, /buttonText : fdsfdsf., buttonImg: images/browse.jpg, / hideButton : true, / rollover : true, wmode: transparent , onComplete : function (event, queueID, fileObj, response, data) $().appendTo(.files).text(response);,onError: function(event, queueID, fileObj) alert(文件: + fileO + 上传失败);/ onCancel : function(event, queueID, fileObj) / / alert(取消文件： + fileO);/ ); 2、Copy code$(document).ready(function() $(#uploadify).uploadify(uploader : images/uploadify.swf,script : /content/ImportScheduleCommitAction.do,cancelImg: images/cancel.png,folder : /,queueID: fileQueue,fileDataName : uploadify,fileDesc : 支持格式:xls., fileExt: *.xls,auto : false,multi: true,height : 20,width: 50,simUploadLimit : 3,/buttonText : fdsfdsf.,buttonImg: images/browse.jpg,/ hideButton : true,/ rollover : true,wmode: transparent ,onComplete : function (event, queueID, fileObj, response, data) $().appendTo(.files).text(response); , onError: function(event, queueID, fileObj) alert(文件: + fileO + 上传失败); / onCancel : function(event, queueID, fileObj)/ / alert(取消文件： + fileO); / ); 解决jquery.uploaddify 不支持中文按钮 问题 Uploadify有一个参数是 buttonText 这个无论你怎么改都不支持中文，因为插件在js里用了一个转码方法把这个参数的值转过码了，解码的地方在那个swf文件里，看不到代码，所以这条路不行。 另一个参数，是 buttonImg( 按钮图片)，这时你完全可以用一个图片来替换掉插件自带的那个黑色的flash浏览按钮，只要你自己的图片上是中文，这不就解决了中文按钮问题么？如果只加这一个，你会发现你的按钮图片下面有一片白色区域，其实就是那个flash留下的，白色区域表示鼠标可用范围，这个范围可以用width,height 来调整。还有一个参数 wmode 它的默认值是opaque，把它改成transparent就行了，也就是把那片白色区域透明化。再用刚才说的方法，把按键点击范围设置成跟你图片一样大 就完全OK了。 jquery的上传插件Uploadify的返回值介绍介绍的key值的value为一个函数，可以在选择文件、出错或其他一些操作的时候返回一些信息给用户。onInit : 做一些初始化的工作。onSelect ：选择文件时触发，该函数有三个参数event:事件对象。queueID：文件的唯一标识，由6为随机字符组成。fileObj：选择的文件对象，有name、size、creationDate、modificationDate、type 5个属性。Copy code$(document).ready(function()$(#uploadify).uploadify(uploader: JS/jquery.uploadify-v2.1.0/uploadify.swf, script: UploadHandler.ashx, cancelImg: JS/jquery.uploadify-v2.1.0/cancel.png, folder: UploadFile, queueID: fileQueue, auto: false, multi: true, onInit:function()alert(1);,onSelect: function(e, queueId, fileObj) alert(唯一标识: + queueId + rn +文件名： + fileO + rn +文件大小： + fileObj.size + rn +创建时间： + fileObj.creationDate + rn +最后修改时间： + fileObj.modificationDate + rn +文件类型： + fileObj.type);););当选择一个文件后弹出的消息如下图：onSelectOnce ：在单文件或多文件上传时，选择文件时触发。该函数有两个参数event，data，data对象有以下几个属性：fileCount：选择文件的总数。 filesSelected：同时选择文件的个数，如果一次选择了3个文件该属性值为3。 filesReplaced：如果文件队列中已经存在A和B两个文件，再次选择文件时又选择了A和B，该属性值为2。 allBytesTotal：所有选择的文件的总大小。 onCancel : 当点击文件队列中文件的关闭按钮或点击取消上传时触发。该函数有event、queueId、fileObj、data四个参数，前三个参数同onSelect 中的三个参数，data对象有两个属性fileCount和allBytesTotal。fileCount：取消一个文件后，文件队列中剩余文件的个数。 allBytesTotal：取消一个文件后，文件队列中剩余文件的大小。 onClearQueue ：当调用函数fileUploadClearQueue时触发。有event和data两个参数，同onCancel 中的两个对应参数。onQueueFull ：当设置了queueSizeLimit并且选择的文件个数超出了queueSizeLimit的值时触发。该函数有两个参数event和queueSizeLimit。onError ：当上传过程中发生错误时触发。该函数有event、queueId、fileObj、errorObj四个参数，其中前三个参数同上，errorObj对象有type和info两个属性。type：错误的类型，有三种HTTP, IO, or Security info：错误的描述 onOpen ：点击上传时触发，如果auto设置为true则是选择文件时触发，如果有多个文件上传则遍历整个文件队列。该函数有event、queueId、fileObj三个参数，参数的解释同上。onProgress ：点击上传时触发，如果auto设置为true则是选择文件时触发，如果有多个文件上传则遍历整个文件队列，在onOpen之后触发。该函数有event、queueId、fileObj、data四个参数，前三个参数的解释同上。data对象有四个属性percentage、bytesLoaded、allBytesLoaded、speed：percentage：当前完成的百分比 bytesLoaded：当前上传的大小 allBytesLoaded：文件队列中已经上传完的大小 speed：上传速率 kb/s onComplete：文件上传完成后触发。该函数