基于jquery的上传插件Uploadify

hahale 贡献于2012-11-02

作者 aaa  创建于2011-02-22 01:53:00   修改者aaa  修改于2011-02-22 01:56:00字数7157

文档摘要:看到一款基于jquery的上传插件Uploadify无论在功能、外观、可用性和扩展性上都有不错表现,于是研究了一番。简介Uploadify简单说来,是基于Jquery的一款文件上传插件。它的功能特色总结如下:支持单文件或多文件上传,可控制并发上传的文件数在服务器端支持各种语言与之配合使用,诸如PHP,.NET,Java……通过参数可配置上传文件类型及大小限制通过参数可配置是否选择文件后自动上传易于扩展,可控制每一步骤的回调函数(onSelect,onCancel……)通过接口参数和CSS控制外观更多。
关键词:

 看到一款基于jquery的上传插件Uploadify无论在功能、外观、可用性和扩展性上都有不错表现,于是研究了一番,介绍给大家。    简介 Uploadify简单说来,是基于Jquery的一款文件上传插件。它的功能特色总结如下: 支持单文件或多文件上传,可控制并发上传的文件数 在服务器端支持各种语言与之配合使用,诸如PHP,.NET,Java…… 通过参数可配置上传文件类型及大小限制 通过参数可配置是否选择文件后自动上传 易于扩展,可控制每一步骤的回调函数(onSelect, onCancel……) 通过接口参数和CSS控制外观 更多…… 相关链接 Uploadify主页地址:http://www.uploadify.com/ 在该页面你可以了解到关于他的更多内容。 Uploadify在线演示:在线Demo Uploadify配置参数及接口文档:http://www.uploadify.com/documentation Uploadify插件下载地址:http://www.uploadify.com/download 使用方法 下载插件安装包后,可以看到里面的几个主要文件:jquery.uploadify.js(完成上传功能的脚本文件,在调用页面引用)、uploadify.css(外观样式表)、uploader.swf(上传控件的主体文件,flash控件)、upload.php(服务器端处理文件,官方仅提供了php版的) 引用了插件文件后,在页面中做如下调用: //声明一个普通的html文件上传控件,并指定id //将声明的普通上传控件与Uploadify插件绑定 上面列出了我认为常用的配置选项,此外还有很多参数可配置,参考官方文档 通过调用相关功能函数,声明功能按钮。 例如声明上传功能按钮(自动上传时不需要): 上传文件 声明取消多文件上传时上传队列: 取消上传队列  jquery.Uploadify部分参数的介绍,API的中文解释以以使用例子     以下附上Uploadify部分参数的介绍:    uploader : uploadify.swf 文件的相对路径,该swf文件是一个带有文字BROWSE的按钮,点击后弹出打开文件对话框,默认值:uploadify.swf。   script : 后台处理程序的相对路径 。默认值:uploadify.php   checkScript :用来判断上传选择的文件在服务器是否存在的后台处理程序的相对路径   fileDataName :设置一个名字,在服务器处理程序中根据该名字来取上传文件的数据。默认为Filedata   method : 提交方式Post 或Get 默认为Post   scriptAccess :flash脚本文件的访问模式,如果在本地测试设置为always,默认值:sameDomain   folder : 上传文件存放的目录 。   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 code 1、