jQuery文件上传插件Uploadify使用指南


Posted in Javascript onJune 05, 2014

对于HTML5版本会比较好的支持手机浏览器,避免苹果手机Safari浏览器不支持
Flash,主要特性:支持多文件上传、HTML5版本可拖拽上传、实时上传进度条显示、强大的参数
定制功能,如文件大小、文件类型、按钮图片定义、上传文件脚本等。

Flash版本使用方法:
1.加载JS和CSS

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

2.编写HTML内容

<form>
<div id="queue"></div>
<input id="file_upload" name="file_upload" type="file" multiple="true">
</form>

3.函数调用

<script type="text/javascript">
        $(document).ready(function()
        {
            $("#file_upload").uploadify({
                'uploader': 'uploadify.swf',
                'script': 'UploadHandler.php',                
                'folder': 'UploadFile',
                'queueID': 'fileQueue',
                'auto': true,
                'multi': true
            });
        });  
</script>

4.更多参数配置详解

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 :选择文件到文件队列中后的每一个文件上的关闭按钮图标

上面介绍的key值的value都为字符串或是布尔类型,比较简单,接下来要介绍的key值的value为一个函数,可以在选择文件、出错或其他一些操作的时候返回一些信息给用户。

onInit : 做一些初始化的工作
onSelect :选择文件时触发,该函数有三个参数
event:事件对象。
queueID:文件的唯一标识,由6为随机字符组成。
fileObj:选择的文件对象,有name、size、creationDate、modificationDate、type 5个属性。
代码如下:

 
<script type="text/javascript">
$(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 + "\r\n" +
                  "文件名:" + fileObj.name + "\r\n" +
                  "文件大小:" + fileObj.size + "\r\n" +
                  "创建时间:" + fileObj.creationDate + "\r\n" +
                  "最后修改时间:" + fileObj.modificationDate + "\r\n" +
                  "文件类型:" + fileObj.type
            );        }
    });
});
</script>

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:文件上传完成后触发。该函数有四个参数event、queueId、fileObj、response、data五个参数,前三个参数
同上。response为后台处理程序返回的值,在上面的例子中为1或0,data有两个属性fileCount和speed
fileCount:剩余没有上传完成的文件的个数。
speed:文件上传的平均速率 kb/s
注:fileObj对象和上面讲到的有些不太一样,onComplete 的fileObj对象有个filePath属性可以取出上传文件的路径。
onAllComplete:文件队列中所有的文件上传完成后触发。该函数有event和data两个参数,data有四个属性,
分别为:
filesUploaded :上传的所有文件个数。
errors :出现错误的个数。
allBytesLoaded :所有上传文件的总大小。
speed :平均上传速率 kb/s

Javascript 相关文章推荐
greybox——不开新窗口看新的网页
Feb 20 Javascript
最佳JS代码编写的14条技巧
Jan 09 Javascript
JS获取当前日期和时间的简单实例
Nov 19 Javascript
一个简单的jquery的多选下拉框(自写)
May 05 Javascript
JS动态修改iframe高度和宽度的方法
Apr 01 Javascript
JavaScript实现点击文本自动定位到下拉框选中操作
Jun 15 Javascript
微信小程序 实现列表项滑动显示删除按钮的功能
Apr 13 Javascript
详解vue + vuex + directives实现权限按钮的思路
Oct 24 Javascript
JavaScript创建对象方法实例小结
Sep 03 Javascript
基于vue通用表单解决方案的思考与分析
Mar 16 Javascript
解决vue加scoped后就无法修改vant的UI组件的样式问题
Sep 07 Javascript
JavaScript常用工具函数汇总(浏览器环境)
Sep 17 Javascript
IE6-IE9中tbody的innerHTML不能赋值的解决方法
Jun 05 #Javascript
首页图片漂浮效果示例代码
Jun 05 #Javascript
原生js实现fadein 和 fadeout淡入淡出效果
Jun 05 #Javascript
javascript的事件触发器介绍的实现
Jun 05 #Javascript
javascript中attribute和property的区别详解
Jun 05 #Javascript
使用jquery实现的一个图片延迟加载插件(含图片延迟加载原理)
Jun 05 #Javascript
用js的document.write输出的广告无阻塞加载的方法
Jun 05 #Javascript
You might like
用PHP4访问Oracle815
2006/10/09 PHP
用PHP读取flv文件的播放时间长度
2009/09/03 PHP
php生成缩略图填充白边(等比缩略图方案)
2013/12/25 PHP
ajax+php实现无刷新验证手机号的实例
2017/12/22 PHP
PHP连续签到功能实现方法详解
2019/12/04 PHP
php+js实现的拖动滑块验证码验证表单操作示例【附源码下载】
2020/05/27 PHP
jQuery 性能优化手册 推荐
2010/02/23 Javascript
ExtJS 2.0 GridPanel基本表格简明教程
2010/05/25 Javascript
jquery带翻页动画的电子杂志代码分享
2015/08/21 Javascript
javascript字符串替换函数如何一次性全部替换掉
2015/10/30 Javascript
ajax异步请求详解
2017/01/06 Javascript
js实现分页功能
2017/05/24 Javascript
ztree实现左边动态生成树右边为内容详情功能
2017/11/03 Javascript
Vue.use源码学习小结
2018/06/20 Javascript
Node.js折腾记一:读指定文件夹,输出该文件夹的文件树详解
2019/04/20 Javascript
压缩Vue.js打包后的体积方法总结(Vue.js打包后体积过大问题)
2020/02/03 Javascript
Python linecache.getline()读取文件中特定一行的脚本
2008/09/06 Python
python django集成cas验证系统
2014/07/14 Python
Python3实现将文件树中所有文件和子目录归档到tar压缩文件的方法
2015/05/22 Python
Django使用Celery异步任务队列的使用
2018/03/13 Python
解决django服务器重启端口被占用的问题
2019/07/26 Python
python 使用pdfminer3k 读取PDF文档的例子
2019/08/27 Python
python 动态迁移solr数据过程解析
2019/09/04 Python
如何验证python安装成功
2020/07/06 Python
北京银河万佳Java面试题
2012/03/21 面试题
应聘自荐信
2013/12/14 职场文书
财务会计人员求职的自我评价
2014/01/13 职场文书
出国导师推荐信
2014/01/16 职场文书
初中军训感想300字
2014/03/05 职场文书
计算机相关专业自荐信
2014/07/02 职场文书
公安机关查摆剖析材料
2014/10/10 职场文书
教育见习报告范文
2014/11/03 职场文书
升学宴答谢词
2015/01/05 职场文书
2015年教师业务工作总结
2015/05/26 职场文书
毕业感言怎么写
2015/07/31 职场文书
敬业奉献模范事迹材料(2016精选版)
2016/02/26 职场文书