Uploadify/uploadifive上传(中文文档)
Uploadify/uploadifive主要特点有:
1. 多文件上传
2. 个性化设置
3. 上传进度条显示
4. 拖拽上传(HTML5版本)
部署
在部署一个Uploadify实例前,请确保满足最低要求:
- 1.jQuery 1.4.x 或更高版本
- 2.Flash Player 9.0.24 或更高版本
- 3.支持PHP, ASP.Net, Cold Fusion的服务器环境(官方默认支持PHP)
下载最新版本的uploadify,解压到服务器根目录下的uploadify文件夹中,你可以看到以下文件:
- Change Log.txt(uploadify的升级日志,部署时删掉)
- check-exists.php(用来检查上传目标文件夹里是否存在相同文件)
- index.php(官方实例)
- jquery.uploadify.js(上传插件)
- jquery.uploadify.min.js(压缩版的上传插件,部署时使用)
- license.txt(许可证文件,部署时删掉)
- uploadify.css(上传控件样式表)
- uploadify.php(上传数据处理文件)
- uploadify.swf(flash基础文件)
- uploadify-cancel.png(取消按钮图片)
在官方提供的实例文件中,是引用的jquery官方网站上的jquery库,有需要的朋友还需要本地引用jquery库。
下面我们看一看如何在你的项目上部署uploadify:
1.我们假定上传控件部署在网站根目录下的upload.
php中,uploadify文件夹位于网站根目录中,上传的文件保存在根目录下的upload文件夹中,uploadify文件夹中包含check-exists.php、jquery.min.js 、jquery.uploadify.min.js、uploadify.css、uploadify.swf、uploadify-cancel.png。
2.引用jquery库
- <script type="text/javascript" src="/uploadify/jquery.min.js"></script>
3.引用uploadify脚本
- <script type="text/javascript" src="/uploadify /jquery.uploadify.min.js"></script>
4.引用uploadify样式表
- <link rel="stylesheet" type="text/css" href="uploadify.css" />
5. 声明一个普通的html文件上传控件,并指定id
- <input id="file_upload" name="file_upload" type="file" multiple="true">
6. 将声明的普通上传控件与Uploadify插件绑定,并初始化
- <script type="text/javascript">
- $(function() {
- $(‘#file_upload‘).uploadify({
- ‘swf‘ : ‘/uploadify uploadify.swf‘, //指定上传控件的主体文件
- ‘uploader‘ : ‘/uploadify uploadify.php‘ //指定服务器端上传处理文件
- //其他配置项
- });
- });
- </script>
属性
auto布尔型
设置auto为true,当文件被添加至上传队列时,将会自动上传。
buttonClass字符串
为上传按钮添加类名。
buttonCursor字符串
鼠标经过上传按钮时,鼠标的形状。可选值为‘hand’(手形) 和 ‘arrow’(箭头)。
buttonImage字符串
定义“浏览”按钮背景图像的路径。给按钮设置背景图像的代码最好写在CSS文件中。
buttonText字符串
定义显示在默认按钮上的文本。
定义检查目标文件夹中是否存在同名文件的脚本文件路径。
debug布尔型
当其值为true时,开启SWFUpload调试模式。
fileObjName字符串
定义上传数据处理文件中接收数据使用的文件对象名。
上传文件大小限制。
fileTypeDesc字符串
可选择的文件类型的描述。此字符串出现在浏览文件对话框的文件类型下拉菜单中。
fileTypeExts字符串
定义允许上传的文件后缀。
formDataJSON对象
定义在文件上传时需要一同提交的其他数据对象。
height整型
上传按钮的高度(单位:像素)。
itemTemplate布尔型
itemTemplate选项允许你为每一个添加到队列中选项设定一个不同HTML模板。
method字符串
上传文件的提交方法,取值‘post‘或‘get‘。
multi布尔型
设置值为false时,一次只能选中一个文件。
overrideEventsJSON
该项定义了一组默认脚本中你不想执行的事件名称。
如果设置为真,一个随机的值添加到SWF文件的URL,因此它不会缓存。
progressData字符串
设置显示在上传进度条中的数据类型,可选项时百分比(percentage)或速度(speed)。
queueID字符串
queueID选项允许你设置一个拥有唯一ID的DOM元素来作为显示上传队列的容器。
上传队列中一次可容纳的最大条数。
不设置该选项或者将其设置为false,将使上传队列中的项目始终显示于队列中,直到点击了关闭按钮或者队列被清空。
设置上传完成后从上传队列中移除的时间(单位:秒)。
设置为真时,上传队列重置或上传多次重试时,返回错误信息。
表示uploadify的成功等待时间(单位:秒,默认30秒)。
swf字符串
定义uploadify.swf的路径。
uploader字符串
定义服务器端上传数据处理脚本文件uploadify.swf的路径。
定义允许的最大上传数量。
width整型
定义浏览按钮的宽度。
事件
onCancel函数
设置onCancel选项,在文件上传被取消时,将允许运行一个自定义函数。
设置onClearQueue选项,上传队列清空(激活ancel方法)时,将允许运行一个自定义函数。
销毁Uploadify实例(调用destroy方法)时触发该事件。
当浏览文件对话框关闭时触发该事件。如果该事件被添加到overrideEvents属性中,在添加文件到队列中发生错误时,将不会弹出默认错误信息。
在浏览文件对话框被打开前一瞬触发该事件。
调用disable方法禁用Uploadify实例时触发该事件。
onEnable函数
调用disable方法启用Uploadify实例时触发该事件。
浏览器检测不到兼容版本的Flash时触发该事件。
onInit函数
调用Uploadify初始化结束时触发该事件。
队列中的所有文件被处理完成时触发该事件。
onSelect函数
每添加一个文件至上传队列时触发该事件。
选择文件返回错误时触发该事件。每一个文件返回错误都会触发该事件。
当flash按钮载入完毕时触发该事件。
每一个文件上传完成都会触发该事件,不管是上传成功还是上传失败。
上传失败时触发该事件。
上传进度更新时触发该事件。
在开始上传之前的瞬间会触发该事件。
每一个文件上传成功时触发该事件。
方法
取消上传对象。
销毁Uploadify实例,并返回原文件域。
控制浏览按钮是否可用。
返回或更新一个Uploadify实例的值。
停止当前上传。
上传指定文件或队列中的所有文件。
Uploadify/uploadifive上传(中文文档)的更多相关文章
- Phoenix综述(史上最全Phoenix中文文档)
个人主页:http://www.linbingdong.com 简书地址:http://www.jianshu.com/users/6cb45a00b49c/latest_articles 网上关于P ...
- debian8上安装pyspider - pyspider中文文档 - pyspider中文网
debian8上安装pyspider - pyspider中文文档 - pyspider中文网 #apt-get install python python-dev python-distribu ...
- mvc中使用uploadify批量上传的应用
网上找了很多资料都没有发现一个好用.可以用的uploadify批量上传的应用,这里通过官方和自己的一些项目需要整理了一个出来. 希望能帮助到需要的人. 效果图:
- Spring中文文档
前一段时间翻译了Jetty的一部分文档,感觉对阅读英文没有大的提高(*^-^*),毕竟Jetty的受众面还是比较小的,而且翻译过程中发现Jetty的文档写的不是很好,所以呢翻译的兴趣慢慢就不大了,只能 ...
- Struts2+Uploadify文件上传使用详解
Uploadify是JQuery的一个上传插件,实现的效果非常不错,带进度显示.不过官方提供的实例是php版本的,本文将详细介绍Uploadify在java中的使用,您也可以点击下面的链接进行演示或下 ...
- 【Chromium中文文档】线程
线程 转载请注明出处:https://ahangchen.gitbooks.io/chromium_doc_zh/content/zh//General_Architecture/Threading. ...
- PyTorch官方中文文档:torch.nn
torch.nn Parameters class torch.nn.Parameter() 艾伯特(http://www.aibbt.com/)国内第一家人工智能门户,微信公众号:aibbtcom ...
- phantomjs 中文文档
phantomjs 中文文档 转载 入门教程:转载 http://www.cnblogs.com/front-Thinking/p/4321720.html 1.介绍 简介 PhantomJS是一 ...
- axios 中文文档(转载)
axios中文文档 转载来源:https://www.jianshu.com/p/7a9fbcbb1114 原始出处:lewis1990@amoy axios 基于promise用于浏览器和node. ...
随机推荐
- Eclipse,到了说再见的时候了——Android Studio最全解析
转自:http://blog.jobbole.com/77635/ 去年的Google大会上,Google带给我们一个小玩具——Android Studio,说它是玩具,是因为它确实比较菜,界面过时, ...
- [超级懒人最简单法]iPhone 6 plus 适配切图方法分享(转载文章)
网络上已经有很多适配教程,可是看了半天总是半懂不懂..最后还是要综合多个教程再动动脑子动动手,最好有程序大哥帮你试一下(这得有多大的福气) 如果有跟我一样情况的: 1. 有人说用sketc ...
- [BZOJ1501][NOI2005] 智慧珠游戏
Input 文件中包含初始的盘件描述,一共有10行,第i行有i个字符.如果第i行的第j个字符是字母”A”至”L”中的一个,则表示第i行第j列的格子上已经放了零件,零件的编号为对应的字母.如果第i行的第 ...
- mongodb用子文档做为查询条件的两种方法
{ "_id": ObjectId("52fc6617e97feebe05000000"), "age": 28, "level& ...
- 使用功能强大的插件FastReport.Net打印报表实例
我第一次使用FastReport插件做的功能是打印一个十分复杂的excel表格,有几百个字段都需要绑定数据,至少需要4个数据源,而且用到横向.竖向合并单元格. 我不是直接连接数据库,而是使用Regis ...
- KVM 基本命令
一.问题描述: KVM中宿主机通过console无法连接客户机,卡在这里不动了. # virsh console vm01 Connected to domain vm01 Escape charac ...
- 谢欣伦 - OpenDev原创教程 - 网络设备查找类CxNetworkHostFind & CxNetworkAdapterFind
这是一个精练的网络设备查找类,类名.函数名和变量名均采用匈牙利命名法.小写的x代表我的姓氏首字母(谢欣伦),个人习惯而已,如有雷同,纯属巧合. CxNetworkHostFind的使用如下: void ...
- struts-json-plugin result中配置对象的序列化
注意: 在使用strtus-json-plugin序列化对象属性,配置result标签下includeProperties属性时使用 对象名.*或则指定属性名的方式,不能光写对象属性名. 问题: ac ...
- HTML5 头部标签定义
<!DOCTYPE html> <!-- 使用 HTML5 doctype,不区分大小写 --> <html lang="zh-cmn-Hans"&g ...
- Chrome F12学习
Chrome实用调试技巧 Chrome调试工具常用功能整理 Google Chrome开发者工具使用(图文教程) 如何更专业的使用Chrome开发者工具