JQuery上传插件Uploadify使用详解

目录[-]

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

?


1

2

3

4

5

6

7

8

9

10

11

12

13

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title>Uploadify</title>

    <link href="JS/jquery.uploadify-v2.1.0/example/css/default.css" rel="stylesheet" type="text/css" />

    <link href="JS/jquery.uploadify-v2.1.0/uploadify.css"

rel="stylesheet" type="text/css" />

    <script type="text/javascript" src="JS/jquery.uploadify-v2.1.0/jquery-1.3.2.min.js"></script>

    <script type="text/javascript" src="JS/jquery.uploadify-v2.1.0/swfobject.js"></script>

    <script type="text/javascript" src="JS/jquery.uploadify-v2.1.0/jquery.uploadify.v2.1.0.min.js"></script>

</head>

注：文件包里有两个js分别是：jquery.uploadify.js 和 jquery.uploadify.min.js，两者其实一样，只需载入其中一个js即可。很明显jquery.uploadify.min.js是封装好了的，开发人员推荐使用前者。

Options选项设置

auto：设置为true当选择文件后就直接上传了，为false需要点击上传按钮才上传 。
buttonClass：给“浏览按钮”加css的class样式
buttonCursor：鼠标移上去形状：arrow箭头、hand手型（默认）
buttonImage：浏览按钮的图片的路径 ，鼠标移上去变换图片
buttonText：浏览按钮的文本，默认值：BROWSE 。
checkScript ：用来判断上传选择的文件在服务器是否存在的后台处理程序的相对路径 
checkExisting：在目录中检查文件是否已上传成功（1 ture,0 false）
cancelImg ：选择文件到文件队列中后的每一个文件上的关闭按钮图标，如下图：

debug：是否显示调试框（默认不显示false）
folder ：  上传文件存放的目录 。
fileDesc ： 这个属性值必须设置fileExt属性后才有效，用来设置选择文件对话框中的提示文本，如设置fileDesc为“请选择rar doc pdf文件”，打开文件选择框效果如下图：

fileExt ： 设置可以选择的文件的类型，格式如：‘*.doc;*.pdf;*.rar‘ 。
fileDataName ：设置一个名字，在服务器处理程序中根据该名字来取上传文件的数据。默认为Filedata
fileObjName：设置一个名字，在服务器处理程序中根据该名字来取上传文件的数据。默认为Filedata，$tempFile = $_FILES[‘Filedata‘][‘tmp_name‘]
fileSizeLimit：设置允许上传文件最大值B, KB, MB, GB 比如：‘fileSizeLimit‘ : ‘20MB‘
fileTypeDesc：选择的文件的描述。这个字符串出现在浏览文件对话框中文件类型下拉框处。默认：All Files
fileTypeExts：允许上传的文件类型。格式：‘fileTypeExts‘ : ‘*.gif; *.jpg; *.png‘
formData：附带值，需要通过get or post传递的额外数据，需要结合onUploadStart事件一起使用
height： 设置“浏览按钮”高度px ，默认值：30。 
hideButton ： 设置为true则隐藏浏览按钮的图片 。 
itemTemplate：<itemTemplate>节点表示显示的内容。这些内容中也可以包含绑定到控件DataSource属性中元素集合的数据。
method：提交方式Post 或Get 默认为Post 
multi：选择文件时是否可以【选择多个】。默认：可以true
overrideEvents：不执行默认的onSelect事件
preventCaching：随机缓存值 默认true ，可选true和false.如果选true,那么在上传时会加入一个随机数来使每次的URL都不同,以防止缓存.但是可能与正常URL产生冲突
progressData：进度条上显示的进度:有百分比percentage和速度speed。默认百分比
queueID：文件队列的ID，该ID与存放文件队列的div的ID一致。给“进度条”加背景css的ID样式。文件选择后的容器ID
queueSizeLimit：当允许多文件生成时，设置选择文件的个数，默认值：999 。
removeCompleted：上传完成后队列是否自动消失。默认：true
removeTimeout：上传完成后队列多长时间后消失。默认 3秒    需要：‘removeCompleted‘ : true,时使用
requeueErrors：队列上传出错，是否继续回滚队列，即反复尝试上传。默认：false
rollover ： 值为true和false，设置为true时当鼠标移到浏览按钮上时有反转效果。
sizeLimit ： 上传文件的大小限制 。
simUploadLimit ： 允许同时上传的个数 默认值：1 。
scriptAccess ：flash脚本文件的访问模式，如果在本地测试设置为always，默认值：sameDomain
script ：   后台处理程序的相对路径 。默认值：uploadify.php
successTimeout：上传超时时间。文件上传完成后,等待服务器返回信息的时间(秒).超过时间没有返回的话,插件认为返回了成功。 默认：30秒
swf：swf文件的路径,本文件是插件自带的,不可用其它的代替.本参数不可省略
uploader：uploadify.swf 文件的相对路径，该swf文件是一个带有文字BROWSE的按钮，点击后淡出打开文件对话框，默认值：uploadify.swf。 
uploadLimit：限制总上传文件数,默认是999。指同一时间，如果关闭浏览器后重新打开又可上传。
width ：设置“浏览按钮”宽度px ，默认值：110。
wmode ： 设置该项为transparent 可以使浏览按钮的flash背景文件透明，并且flash文件会被置为页面的最高层。 默认值：opaque 。 

Events事件

onInit : 每次初始化一个队列时触发,做一些初始化的工作。

?


1

‘onInit‘:function(){alert("1");}

onSelect ：当文件从浏览框被添加到队列中时触发.选择文件时触发，该函数有三个参数

  • event:事件对象。
  • queueID：文件的唯一标识，由6为随机字符组成。
  • fileObj：选择的文件对象，有name、size、creationDate、modificationDate、type 5个属性。

代码如下：

?


1

2

3

4

5

6

7

8

9

‘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

            );

当选择一个文件后弹出的消息如下图：

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 ：清除队列。当‘cancel‘方法带着*参数时,也就是说一次全部取消的时候触发.queueItemCount是被取消的文件个数（另外的按钮）.当调用函数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

onDestroy：取消所有的上传队列（另外的按钮）

onDialogClose：当选择文件对话框关闭时触发,不论是点的‘确定‘还是‘取消‘都会触发.如果本事件被添加进了‘overrideEvents‘参数中,那么如果在选择文件时产生了错误,不会有错误提示框弹出

onDialogOpen：当选择文件框被打开时触发,没有传过来的参数

onEnable：开启上传

onDisable：关闭上传

onFallback：检测FLASH失败调用

onQueueComplete：当队列中的所有文件上传完成时触发

onSelectError：选择文件出错时触发

onSWFReady：flash准备好时触发

onUploadComplete：当一个文件上传完成时触发

onUploadError：当文件上传完成但是返回错误时触发

onUploadProgress：上传汇总

onUploadStart：一个文件上传之间触发（动态改变参数的值，此方法很重要，当在多文件跨服务器上传时，你要给每个文件赋值不同的OnlyKey，即修改formData数据，服务器上的文件和数据库的OnlyKey一致，必须用到此方法）

onUploadSuccess：每个上传完成并成功的文件都会触发本事件

uploadifySettings：可以动态修改上面介绍的那些key值，如下面代码

?


1

<strong>$(‘#uploadify‘).uploadifySettings(‘folder‘,‘JS‘);</strong>

如果上传按钮的事件写成下面这样，文件将会上传到uploadifySettings定义的目录中

?


1

<a href="javascript:$(‘#uploadify‘).uploadifySettings(‘folder‘,‘JS‘); $(‘#uploadify‘).uploadifyUpload()">上传</a>

uploadifyCancel：该函数接受一个queueID作为参数，可以取消文件队列中指定queueID的文件。

?


1

$(‘#uploadify‘).uploadifyCancel(id);

Methods方法

cancel：取消一个上传队列

destroy：取消所有上传队列
disable：禁止点击“浏览按钮”
settings：返回或修改一个 uploadify实例的settings值
stop：停止当前的上传并重新添加到队列中去
upload：上传指定的文件或者所有队列中的文件

uploadify多文件上传例子：

?


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>uploadify 多文件上传例子</title>

<script

    src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"

    type="text/javascript"></script>

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

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

<style type="text/css">

body {

    font: 13px Arial, Helvetica, Sans-serif;

}

.haha {

    color: #FFFFFF;

}

#queue {

    

    border-radius: 3px;

    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);

    height: 103px;

    margin-bottom: 10px;

    overflow: auto;

    padding: 5px 10px;

    width: 300px;

}

</style>

</head>

<body>

    <h1>Uploadify Demo</h1>

    <form>

        <div id="queue"></div>

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

    </form>

    <script type="text/javascript">

        $(function() {

            $(‘#file_upload‘)

                    .uploadify(

                            {  

                                ‘debug‘             : false,

                                ‘auto‘              : true, //是否自动上传,  

                                ‘buttonClass‘       : ‘haha‘, //按钮辅助class  

                                ‘buttonText‘        : ‘上传图片‘, //按钮文字  

                                ‘height‘            : 30, //按钮高度  

                                ‘width‘             : 100, //按钮宽度  

                                ‘checkExisting‘     : ‘check-exists.php‘,//是否检测图片存在,不检测:false  

                                ‘fileObjName‘       : ‘files‘, //默认 Filedata, $_FILES控件名称  

                                ‘fileSizeLimit‘     : ‘1024KB‘, //文件大小限制 0为无限制 默认KB  

                                ‘fileTypeDesc‘      : ‘All Files‘, //图片选择描述  

                                ‘fileTypeExts‘      : ‘*.gif; *.jpg; *.png‘,//文件后缀限制 默认：‘*.*‘  

                                ‘formData‘          : {

                                    ‘someKey‘ : ‘someValue‘,

                                    ‘someOtherKey‘ : 1

                                },//传输数据JSON格式  

                                // ‘formData‘       :{ ‘albumid‘:$("#albumid").val() },               

                                //‘overrideEvents‘  : [‘onUploadProgress‘],  // The progress will not be updated  

                                //‘progressData‘    : ‘speed‘,             //默认percentage 进度显示方式  

                                ‘queueID‘           : ‘queue‘, //默认队列ID  

                                ‘queueSizeLimit‘    : 20, //一个队列上传文件数限制  

                                ‘removeCompleted‘   : true, //完成时是否清除队列 默认true  

                                ‘removeTimeout‘     : 3, //完成时清除队列显示秒数,默认3秒  

                                ‘requeueErrors‘     : false, //队列上传出错，是否继续回滚队列  

                                ‘successTimeout‘    : 5, //上传超时  

                                ‘uploadLimit‘       : 99, //允许上传的最多张数  

                                ‘swf‘               : ‘uploadify.swf‘, //swfUpload  

                                ‘uploader‘          : ‘uploadify.php‘, //服务器端脚本  

                                //修改formData数据  

                                ‘onUploadStart‘ : function(file) {

                                    //$("#file_upload").uploadify("settings", "someOtherKey", 2);  

                                },

                                ‘onUploadStart‘ : function(file) {

                                    //  $("#perpic").uploadify("settings","formData",{"albumid":$("#albumid").val()});   

                                },

                                //删除时触发  

                                ‘onCancel‘ : function(file) {

                                    //alert(‘The file ‘ + file.name + ‘--‘ + file.size + ‘ was cancelled.‘);  

                                },

                                //清除队列  

                                ‘onClearQueue‘ : function(queueItemCount) {

                                    //alert(queueItemCount + ‘ file(s) were removed from the queue‘);  

                                },

                                //调用destroy是触发  

                                ‘onDestroy‘ : function() {

                                    alert(‘我被销毁了‘);

                                },

                                //每次初始化一个队列是触发  

                                ‘onInit‘ : function(instance) {

                                    //alert(‘The queue ID is ‘ + instance.settings.queueID);  

                                },

                                //上传成功  

                                ‘onUploadSuccess‘ : function(file, data,

                                        response) {

                                    //alert(file.name + ‘ | ‘ + response + ‘:‘ + data);  

                                },

                                //上传错误  

                                ‘onUploadError‘ : function(file, errorCode,

                                        errorMsg, errorString) {

                                    //alert(‘The file ‘ + file.name + ‘ could not be uploaded: ‘ + errorString);  

                                },

                                //上传汇总  

                                ‘onUploadProgress‘ : function(file,

                                        bytesUploaded, bytesTotal,

                                        totalBytesUploaded, totalBytesTotal) {

                                    $(‘#progress‘).html(

                                            totalBytesUploaded

                                                    + ‘ bytes uploaded of ‘

                                                    + totalBytesTotal

                                                    + ‘ bytes.‘);

                                },

                                //上传完成  

                                ‘onUploadComplete‘ : function(file) {

                                    //alert(‘The file ‘ + file.name + ‘ finished processing.‘);  

                                },

                            });

        });

        //变换按钮  

        function changeBtnText() {

            $(‘#file_upload‘).uploadify(‘settings‘, ‘buttonText‘, ‘继续上传‘);

        }

        //返回按钮  

        function returnBtnText() {

            alert(‘The button says ‘

                    + $(‘#file_upload‘).uploadify(‘settings‘, ‘buttonText‘));

        }

    </script>

    <h4>操作:</h4>

    <a href="javascript:$(‘#file_upload‘).uploadify(‘upload‘, ‘*‘);">开始上传</a>

    |

    <a href="javascript:$(‘#file_upload‘).uploadify(‘cancel‘, ‘*‘);">清除队列</a>

    |

    <a href="javascript:$(‘#file_upload‘).uploadify(‘destroy‘);">销毁上传</a> |

    <a href="javascript:$(‘#file_upload‘).uploadify(‘disable‘, true);">禁用上传</a>

    |

    <a href="javascript:$(‘#file_upload‘).uploadify(‘disable‘, false);">激活上传</a>

    |

    <a href="javascript:$(‘#file_upload‘).uploadify(‘stop‘);">停止上传</a> |

    <a href="changeBtnText();">变换按钮</a> |

    <h4>大小:</h4>

    <div id=‘progress‘></div>

</body>

</html>
时间： 2024-10-01 10:03:02

JQuery上传插件Uploadify使用详解的相关文章

jQuery上传插件Uploadify使用详解(转发原作者冯威)

jQuery上传插件Uploadify使用详解 本文Uploadify版本为2.1.0,已经过时,截止(2016-09-25)最新版本3.2.1的详细介绍请移步<jQuery上传插件Uploadify使用详解(3.2.1)> Uploadify是jQuery的一个上传插件,实现的效果非常不错,带进度显示.不过官方提供的实例时php版本的,本文将详细介绍Uploadify在Aspnet中的使用,您也可以点击下面的链接进行演示或下载. 官方下载 官方文档 官方演示 首先按下面的步骤来实现一个简单的

JQuery上传插件Uploadify使用详解及错误处理

转自:http://www.jb51.net/article/43498.htm 关于JQuery上传插件Uploadify使用详解网上一大把,基本上内容都一样.我根据网上的步骤配置完成后,会报一些错误,而我根据这些错误去网上找解决方案,却没有相关资料,所以为了不让更多的朋友走弯路,我把我遇到的一些问题进行汇总,也方便我自己以后查阅. 什么是Uploadify Uploadify是JQuery的一个上传插件,支持多文件上传,实现的效果非常不错,带进度显示. 官网提供的是PHP的DEMO,在这里我

jQuery上传插件Uploadify使用详解(3.2.1)(转载)

jQuery上传插件Uploadify使用详解(3.2.1) Sep 25, 2016 | JQuery | 10733 Hits 六年前,因为工作中使用到 jQuery 的上传组件 Uploadify ,写了一篇<JQuery上传插件Uploadify使用详解>的博客来介绍 Uploadify ,其实只是将官方文档简单翻译了下.几年下来居然有50多万的访问量,而且每天通过各种搜索引擎有大几百的朋友会访问到这篇文章.六年时间 Uploadify 从当时的2.1.0到了现在的3.2.1,变化还是

JQuery上传插件Uploadify使用详解（转）

Uploadify是JQuery的一个上传插件,实现的效果非常不错,带进度显示.不过官方提供的实例时php版本的,本文将详细介绍Uploadify在Aspnet中的使用,您也可以点击下面的链接进行演示或下载. 官方下载 官方文档 官方演示 首先按下面的步骤来实现一个简单的上传功能. 1 创建Web项目,命名为JQueryUploadDemo,从官网上下载最新的版本解压后添加到项目中. 2 在项目中添加UploadHandler.ashx文件用来处理文件的上传. 3 在项目中添加UploadFil

JQuery上传插件Uploadify API详解

一.相关key值介绍uploader:uploadify.swf文件的相对路径,该swf文件是一个带有文字BROWSE的按钮,点击后淡出打开文件对话框,默认值:uploadify.swf. script:后台处理程序的相对路径 .默认值:uploadify.php scriptData:上传到后台的参数,参数为json格式.checkScript:用来判断上传选择的文件在服务器是否存在的后台处理程序的相对路径 fileDataName:设置一个名字,在服务器处理程序中根据该名字来取上传文件的数据

jquery上传插件uploadify 报错http error 302 解决方法之一

前段时间用到jquery上传插件uploadify时,始终出现系统报出 http error 302 的错误. 网上大量搜集信息,基本上都是说session值丢失的问题,根据网友提供的解决方案进行修改,问题并没有解决. 因此,不排除这是解决302错误的解决方法之一,但是我接下来提出另一解决方案,考虑到异步传输的问题,供大家参考(反正我是成功了). 首先是uploadify初始化: $(function() {           $('#projectfile').uploadify({    

jQuery上传插件Uploadify出现Http Error 302错误解决

前段时间介绍过jquery uploadify上传插件的使用方法,我在使用中遇到过Http Error 302错误问题,应该会有很多人在使用中遇到过,在此记录下来: 首 先http 302是请求被重定向的意思,这就很容易理解了,如果你的uploadify处理上传脚本有session验证,就会出现此错误,因为flash在执行 post请求的时候没有包含cookie信息,而服务器的session会根据客户端的cookie来得到SESSIONID.没有提交cookie自然 就不能获取到session,

jquery 上传插件 uploadify

官网:http://www.uploadify.com/社区:http://www.uploadify.com/forum/ 基于jQuery的文件上传插件,有flash(Uploadify)和html5(UploadFive)两个版本 特点说明:-----------------1.支持多文件上传2.支持拖放上传(html5版本)3.上传进度显示4.可自定义上传限制,包括文件大小.文件数量.文件类型5.高度可定制性 关于下载-------------------Uploadify™:基于fla

jQuery上传插件Uploadify使用帮助

Uploadify是JQuery的一个上传插件,实现的效果非常不错,带进度显示.它的功能特色总结如下: 支持单文件或多文件上传,可控制并发上传的文件数 在服务器端支持各种语言与之配合使用,诸如PHP,.NET,Java…… 通过参数可配置上传文件类型及大小限制 通过参数可配置是否选择文件后自动上传 易于扩展,可控制每一步骤的回调函数(onSelect, onCancel……) 通过接口参数和CSS控制外观 使用帮助: 官网地址:http://www.uploadify.com/ 官方参数配置文档