Uploadify是一款基于JQuery的优秀的文件/图片上传的插件,有基于Flash和HTML5两种版本。 
 
Uploadify/uploadifive主要特点有: 
1. 多文件上传 
2. 个性化设置 
3. 上传进度条显示

4. 拖拽上传(HTML5版本)

官网:http://www.uploadify.com

部署

在部署一个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库

  1. <script type="text/javascript" src="/uploadify/jquery.min.js"></script>

3.引用uploadify脚本

  1. <script type="text/javascript" src="/uploadify /jquery.uploadify.min.js"></script>

4.引用uploadify样式表

  1. <link rel="stylesheet" type="text/css" href="uploadify.css" />

5. 声明一个普通的html文件上传控件,并指定id

  1. <input id="file_upload" name="file_upload" type="file" multiple="true">

6. 将声明的普通上传控件与Uploadify插件绑定,并初始化

  1. <script type="text/javascript">
  2. $(function() {
  3. $(‘#file_upload‘).uploadify({
  4. ‘swf‘      : ‘/uploadify uploadify.swf‘,    //指定上传控件的主体文件
  5. ‘uploader‘ : ‘/uploadify uploadify.php‘    //指定服务器端上传处理文件
  6. //其他配置项
  7. });
  8. });
  9. </script>

属性

auto布尔型

设置auto为true,当文件被添加至上传队列时,将会自动上传。

buttonClass字符串

为上传按钮添加类名。

buttonCursor字符串

鼠标经过上传按钮时,鼠标的形状。可选值为‘hand’(手形) 和 ‘arrow’(箭头)。

buttonImage字符串

定义“浏览”按钮背景图像的路径。给按钮设置背景图像的代码最好写在CSS文件中。

buttonText字符串

定义显示在默认按钮上的文本。

checkExisting字符串

定义检查目标文件夹中是否存在同名文件的脚本文件路径。

debug布尔型

当其值为true时,开启SWFUpload调试模式。

fileObjName字符串

定义上传数据处理文件中接收数据使用的文件对象名。

fileSizeLimit整型

上传文件大小限制。

fileTypeDesc字符串

可选择的文件类型的描述。此字符串出现在浏览文件对话框的文件类型下拉菜单中。

fileTypeExts字符串

定义允许上传的文件后缀。

formDataJSON对象

定义在文件上传时需要一同提交的其他数据对象。

height整型

上传按钮的高度(单位:像素)。

itemTemplate布尔型

itemTemplate选项允许你为每一个添加到队列中选项设定一个不同HTML模板。

method字符串

上传文件的提交方法,取值‘post‘或‘get‘。

multi布尔型

设置值为false时,一次只能选中一个文件。

overrideEventsJSON

该项定义了一组默认脚本中你不想执行的事件名称。

preventCaching布尔型

如果设置为真,一个随机的值添加到SWF文件的URL,因此它不会缓存。

progressData字符串

设置显示在上传进度条中的数据类型,可选项时百分比(percentage)或速度(speed)。

queueID字符串

queueID选项允许你设置一个拥有唯一ID的DOM元素来作为显示上传队列的容器。

queueSizeLimit整型

上传队列中一次可容纳的最大条数。

removeCompleted布尔型

不设置该选项或者将其设置为false,将使上传队列中的项目始终显示于队列中,直到点击了关闭按钮或者队列被清空。

removeTimeout整型

设置上传完成后从上传队列中移除的时间(单位:秒)。

requeueErrors布尔型

设置为真时,上传队列重置或上传多次重试时,返回错误信息。

successTimeout整型

表示uploadify的成功等待时间(单位:秒,默认30秒)。

swf字符串

定义uploadify.swf的路径。

uploader字符串

定义服务器端上传数据处理脚本文件uploadify.swf的路径。

uploadLimit整型

定义允许的最大上传数量。

width整型

定义浏览按钮的宽度。

事件

onCancel函数

设置onCancel选项,在文件上传被取消时,将允许运行一个自定义函数。

onClearQueue函数

设置onClearQueue选项,上传队列清空(激活ancel方法)时,将允许运行一个自定义函数。

onDestroy函数

销毁Uploadify实例(调用destroy方法)时触发该事件。

onDialogClose函数

当浏览文件对话框关闭时触发该事件。如果该事件被添加到overrideEvents属性中,在添加文件到队列中发生错误时,将不会弹出默认错误信息。

onDialogOpen函数

在浏览文件对话框被打开前一瞬触发该事件。

onDisable函数

调用disable方法禁用Uploadify实例时触发该事件。

onEnable函数

调用disable方法启用Uploadify实例时触发该事件。

onFallback函数

浏览器检测不到兼容版本的Flash时触发该事件。

onInit函数

调用Uploadify初始化结束时触发该事件。

onQueueComplete函数

队列中的所有文件被处理完成时触发该事件。

onSelect函数

每添加一个文件至上传队列时触发该事件。

onSelectError函数

选择文件返回错误时触发该事件。每一个文件返回错误都会触发该事件。

onSWFReady函数

当flash按钮载入完毕时触发该事件。

onUploadComplete函数

每一个文件上传完成都会触发该事件,不管是上传成功还是上传失败。

onUploadError函数

上传失败时触发该事件。

onUploadProgress函数

上传进度更新时触发该事件。

onUploadStart函数

在开始上传之前的瞬间会触发该事件。

onUploadSuccess函数

每一个文件上传成功时触发该事件。

方法

cancel

取消上传对象。

destroy

销毁Uploadify实例,并返回原文件域。

disable

控制浏览按钮是否可用。

settings

返回或更新一个Uploadify实例的值。

stop

停止当前上传。

upload

上传指定文件或队列中的所有文件。

Uploadify/uploadifive上传(中文文档)的更多相关文章

  1. Phoenix综述(史上最全Phoenix中文文档)

    个人主页:http://www.linbingdong.com 简书地址:http://www.jianshu.com/users/6cb45a00b49c/latest_articles 网上关于P ...

  2. debian8上安装pyspider - pyspider中文文档 - pyspider中文网

    debian8上安装pyspider - pyspider中文文档 - pyspider中文网   #apt-get install python python-dev python-distribu ...

  3. mvc中使用uploadify批量上传的应用

    网上找了很多资料都没有发现一个好用.可以用的uploadify批量上传的应用,这里通过官方和自己的一些项目需要整理了一个出来. 希望能帮助到需要的人. 效果图:

  4. Spring中文文档

    前一段时间翻译了Jetty的一部分文档,感觉对阅读英文没有大的提高(*^-^*),毕竟Jetty的受众面还是比较小的,而且翻译过程中发现Jetty的文档写的不是很好,所以呢翻译的兴趣慢慢就不大了,只能 ...

  5. Struts2+Uploadify文件上传使用详解

    Uploadify是JQuery的一个上传插件,实现的效果非常不错,带进度显示.不过官方提供的实例是php版本的,本文将详细介绍Uploadify在java中的使用,您也可以点击下面的链接进行演示或下 ...

  6. 【Chromium中文文档】线程

    线程 转载请注明出处:https://ahangchen.gitbooks.io/chromium_doc_zh/content/zh//General_Architecture/Threading. ...

  7. PyTorch官方中文文档:torch.nn

    torch.nn Parameters class torch.nn.Parameter() 艾伯特(http://www.aibbt.com/)国内第一家人工智能门户,微信公众号:aibbtcom ...

  8. phantomjs 中文文档

    phantomjs 中文文档 转载 入门教程:转载 http://www.cnblogs.com/front-Thinking/p/4321720.html 1.介绍 简介   PhantomJS是一 ...

  9. axios 中文文档(转载)

    axios中文文档 转载来源:https://www.jianshu.com/p/7a9fbcbb1114 原始出处:lewis1990@amoy axios 基于promise用于浏览器和node. ...

随机推荐

  1. Eclipse,到了说再见的时候了——Android Studio最全解析

    转自:http://blog.jobbole.com/77635/ 去年的Google大会上,Google带给我们一个小玩具——Android Studio,说它是玩具,是因为它确实比较菜,界面过时, ...

  2. [超级懒人最简单法]iPhone 6 plus 适配切图方法分享(转载文章)

    网络上已经有很多适配教程,可是看了半天总是半懂不懂..最后还是要综合多个教程再动动脑子动动手,最好有程序大哥帮你试一下(这得有多大的福气) 如果有跟我一样情况的: 1.       有人说用sketc ...

  3. [BZOJ1501][NOI2005] 智慧珠游戏

    Input 文件中包含初始的盘件描述,一共有10行,第i行有i个字符.如果第i行的第j个字符是字母”A”至”L”中的一个,则表示第i行第j列的格子上已经放了零件,零件的编号为对应的字母.如果第i行的第 ...

  4. mongodb用子文档做为查询条件的两种方法

    { "_id": ObjectId("52fc6617e97feebe05000000"), "age": 28, "level& ...

  5. 使用功能强大的插件FastReport.Net打印报表实例

    我第一次使用FastReport插件做的功能是打印一个十分复杂的excel表格,有几百个字段都需要绑定数据,至少需要4个数据源,而且用到横向.竖向合并单元格. 我不是直接连接数据库,而是使用Regis ...

  6. KVM 基本命令

    一.问题描述: KVM中宿主机通过console无法连接客户机,卡在这里不动了. # virsh console vm01 Connected to domain vm01 Escape charac ...

  7. 谢欣伦 - OpenDev原创教程 - 网络设备查找类CxNetworkHostFind & CxNetworkAdapterFind

    这是一个精练的网络设备查找类,类名.函数名和变量名均采用匈牙利命名法.小写的x代表我的姓氏首字母(谢欣伦),个人习惯而已,如有雷同,纯属巧合. CxNetworkHostFind的使用如下: void ...

  8. struts-json-plugin result中配置对象的序列化

    注意: 在使用strtus-json-plugin序列化对象属性,配置result标签下includeProperties属性时使用 对象名.*或则指定属性名的方式,不能光写对象属性名. 问题: ac ...

  9. HTML5 头部标签定义

    <!DOCTYPE html> <!-- 使用 HTML5 doctype,不区分大小写 --> <html lang="zh-cmn-Hans"&g ...

  10. Chrome F12学习

    Chrome实用调试技巧 Chrome调试工具常用功能整理 Google Chrome开发者工具使用(图文教程) 如何更专业的使用Chrome开发者工具