jq上传文件插件Uploadify.js基本用法和配置 - javascript学习,js知识点 - CSS模版园-免费网站模版下载
当前位置 CSS模版园 >> 网站制作 >> javascript >> jq上传文件插件Uploadify.js基本用法和配置

jq上传文件插件Uploadify.js基本用法和配置

Uploadify是一款基于JQuery的优秀的文件/图片上传的插件,有基于Flash和HTML5两种版本。

ploadify/uploadifive主要特点有:

1、多文件上传

2、个性化设置

3、上传进度条显示

4、拖拽上传(HTML5版本)

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

下载:http://www.uploadify.com/download/

预览:http://www.uploadify.com/demos/

在部署一个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 -----取消按钮图片


使用方式

1、引入jQuery和uploadifive样式表以及脚本

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

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

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

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

$(function () {
    $('#file_upload').uploadify({
        'swf': '/uploadify/uploadify.swf',    //指定上传控件的主体文件
        'uploader': '/uploadify/uploadify.php'    //指定服务器端上传处理文件
        //其他配置项
    });
});

属性
auto 布尔型 设置auto为true,当文件被添加至上传队列时,将会自动上传。
buttonClass 字符串 为上传按钮添加类名。
buttonCursor 字符串 鼠标经过上传按钮时,鼠标的形状。可选值为‘hand’(手形) 和 ‘arrow’(箭头)。
buttonImage 字符串 定义“浏览”按钮背景图像的路径。给按钮设置背景图像的代码最好写在CSS文件中。
buttonText 字符串 定义显示在默认按钮上的文本。
checkExisting 字符串 定义检查目标文件夹中是否存在同名文件的脚本文件路径。
debug 布尔型 当其值为true时,开启SWFUpload调试模式。
fileObjName 字符串 定义上传数据处理文件中接收数据使用的文件对象名。
fileSizeLimit 整型 上传文件大小限制。
fileTypeDesc 字符串 可选择的文件类型的描述。此字符串出现在浏览文件对话框的文件类型下拉菜单中。
fileTypeExts 字符串 定义允许上传的文件后缀。
formData JSON对象 定义在文件上传时需要一同提交的其他数据对象。
height 整型 上传按钮的高度(单位:像素)。
itemTemplate 布尔型 itemTemplate选项允许你为每一个添加到队列中选项设定一个不同HTML模板。
method 字符串 上传文件的提交方法,取值‘post‘或‘get‘。
multi 布尔型 设置值为false时,一次只能选中一个文件。
overrideEvents JSON 该项定义了一组默认脚本中你不想执行的事件名称。
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 上传指定文件或队列中的所有文件。

声明本站所有资源仅供学习与参考,请勿用于商业用途。转载请注明来自:cssteach.com

原文http://cssteach.com/html/show-10-144.html

若文章内容有错误或无法下载,请在回复中说明(可无需登录,直接评论)

最新文章

图文

热门网站模版