详解jQuery uploadify文件上传插件的使用方法

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

<form>

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

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

 </form>

 <div id="uploadfiles"></div>

<div id="fileQueue" style="clear:both"></div>

<script type="text/javascript">

var timestamp = new Date().getTime();

var token = Math.floor(Math.random() * 1000) + timestamp;

$(function() {

 $(‘#file_upload‘).uploadify({

 ‘buttonText‘: ‘选择文件..‘,

 ‘fileObjName‘: ‘simplefile‘,

 ‘method‘: ‘post‘,

 ‘multi‘: true,

 ‘queueID‘: ‘fileQueue‘,

 //‘uploadLimit‘: 2,

 ‘fileTypeExts‘: ‘*.gif;*.png;*.jpg;*.bmp;*.jpeg;‘,

 ‘buttonImage‘: ‘/static/js/uploadify/select.png‘,

 ‘formData‘: {

 ‘timestamp‘: timestamp,

 ‘token‘: token

 },

 ‘swf‘: ‘/static/js/uploadify/uploadify.swf‘,

 ‘uploader‘: ‘/static/php/UploaderDemo.php‘,

 ‘onUploadStart‘: function() {

 $imgHtml = ‘<img class="upload_load" src="/static/images/upload.gif" align="absmiddle" />‘;

 $(‘#uploadfiles‘).append($imgHtml);

 },

 ‘onUploadSuccess‘: function(file, data, response) {

 $(‘.upload_load‘).remove();

 var json = $.parseJSON(data);

 if (json.state == ‘success‘) {

 $imgHtml = ‘<span id="file_‘ + json.file_id + ‘">‘;

 $imgHtml += ‘<a href="‘ + json.file + ‘" target="_blank">‘;

 $imgHtml += ‘<img src="‘ + json.file + ‘" width="100" height="100" align="absmiddle"/>‘;

 $imgHtml += ‘</a>‘;

 $imgHtml += ‘<a href="javascript:uploadifyRemove("‘ + json.file + ‘")">删除</a>‘;

 $imgHtml += ‘</span>‘;

 $($imgHtml).appendTo(‘#uploadfiles‘);

 } else {

 alert(json.message);

 }

 },

 ‘onQueueComplete‘: function() {

 $(‘.upload_load‘).remove();

 }

 });

});

</script>

如果设置为0则表示无限制

queueData对象包含如下属性：

• filesSelected 文件选择对话框中共选择了多少个文件
• filesQueued 已经向队列中添加了多少个文件
• filesReplaced 已经向队列中替换了多少个文件
• filesCancelled 取消了多少个文件 filesErrored 出错了多少个文件

queueData对象包含如下属性：

• uploadsSuccessful – 上传成功的文件数量
• uploadsErrored – 上传失败的文件数量

file – 文件对象

errorCode – 错误代码如下：

• QUEUE_LIMIT_EXCEEDED – 任务数量超出队列限制；
• FILE_EXCEEDS_SIZE_LIMIT – 文件大小超出限制；
• ZERO_BYTE_FILE – 文件大小为0
• INVALID_FILETYPE – 文件类型不符合要求

errorMsg – 错误提示，可通过‘this.queueData.errorMsg‘定制

• file – 文件对象
• bytesUploaded – 已上传的字节数
• bytesTotal – 文件总字节数
• totalBytesUploaded – 当前任务队列中全部文件已上传的总字节数
• totalBytesTotal – 当前任务队列中全部文件的总字节数

• file – 文件对象
• data – 服务端输出返回的信息

response – 有输出时为true,如果无响应为false，如果返回的是false,当超过successTimeout设置的时间后假定为true

取消队列中的任务，不管此任务是否已经开始上传

• fileID – 要取消的文件ID，如果为空则取消队列中第一个任务，如果为‘*‘则取消所有任务
• suppressEvent – 是否阻止触发onUploadCancel事件，当清空队列时非常实用。

1. <ahref="javascript:$(‘#file_upload‘).uploadify(‘cancel‘)">
2. 取消第一个</a>
3. <a
4. href="javascript:$(‘#file_upload‘).uploadify(‘cancel‘,
5. ‘*‘)">清空队列</a>
6. <a
7. href="javascript:$(‘#file_upload‘).uploadify(‘upload‘,
8. ‘*‘)">开始上传所有任务</a>

1. <a
2. href="javascript:$(‘#file_upload‘).uploadify(‘destroy‘)">
3. 销毁Uploadify实例</a>

setDisabled – 设置为true表示禁用，false为启用

1. <a
2. href="javascript:$(‘#file_upload‘).uploadify(‘disable‘,
3. true)">禁用按钮</a>
4. <a
5. href="javascript:$(‘#file_upload‘).uploadify(‘disable‘,
6. false)">启用按钮</a>

• name – 属性名称，如果只提供属性名称则表示获取其值
• value – 属性值
• resetObjects – 设置为true时，更新postData对象将清空现有的值。否则，新的值将被添加到其末尾。

1. $(‘#file_upload‘).uploadify(‘settings‘,‘buttonText‘,‘BROWSE‘);
2. $(‘#file_upload‘).uploadify(‘settings‘,‘buttonText‘));

1. <a
2. href="javascript:$(‘#file_upload‘).uploadify(‘upload‘,
3. ‘*‘)">开始上传</a>
4. <a
5. href="javascript:$(‘#file_upload‘).uploadify(‘stop‘)">
6. 停止上传</a>

1. <a
2. href="javascript:$(‘#file_upload‘).uploadify(‘upload‘,‘*‘)">
3. 开始上传所有文</a>