jquery uploadify 的使用

官方的直接用会有一些问题

1、多发了一个对于网站根目录的请求

解决方法:

在jquery.uploadify.js文件中找到下面这段代码

this.settings.upload_url=SWFUpload.completeURL(this.settings.upload_url);this.settings.button_image_url=SWFUpload.completeURL(this.settings.button_image_url)

替换为

this.settings.upload_url=SWFUpload.completeURL(this.settings.upload_url);this.settings.button_image_url=this.settings.button_image_url?SWFUpload.completeURL(this.settings.button_image_url):this.settings.button_image_url

参考自:http://unixlzx.blog.163.com/blog/static/102773752201332505110380/

2、每次带有上传功能的页面初始化都会对swf文件发三次请求

这个问题在网上查了几天,去uploadify社区去看了几天老外的各种提问,没找到解决方法,这个对于上传功能是没有任何影响的,但是开着不怎么爽,就自己调试找方法解决,当然皇天不负有心人,找到了问题的根源,有几种解决方法,我给大家分享一个我这次用的。

对于自己写一个上传插件,不用uploadify也有想过,不过时间上不怎么够,所以就对uploadify进行了简单的处理

效果图:

只有一次对于swf文件的请求了,而且对于网站根目录的请求没有了

原先对与swf文件多发的两次请求的语句分别是

$('#'+swfuploadify.movieName).wrap($wrapper);

//Adjustthestylesofthemovie

$('#'+swfuploadify.movieName).css({

'position':'absolute',

'z-index':1

});

大家应该找到共同之处了,原因就是调用了flash生成的object对象,我的解决方法是避免调用这个对象,所以我在项目中将我的上传按钮强制必须要求放到一个div(容器,p标签,span标签都行)中

官方也就是想把Object对象放入到一个div中进行处理,我也就按他们的意思,只不过反其道而位置

不多说,贴代码

1if(flashInstalled){

2varswfuploadify=newSWFUpload(swfUploadSettings);;

3

4//AddtheSWFUploadobjecttotheelementsdataobject

5$this.data('uploadify',swfuploadify);

6

7$('#'+swfuploadify.movieName).parent().attr('id',settings.id).addClass('uploadify').css({

8'height':settings.height+'px',

9'width':settings.width+'px'

10});

11

12//Recreatethereferencetowrapper

13var$wrapper=$('#'+settings.id);

14//Addthedataobjecttothewrapper

15$wrapper.data('uploadify',swfuploadify);

16

17//Createthebutton

18var$button=$('<div/>',{

19'id':settings.id+'-button',

20'class':'uploadify-button'+settings.buttonClass

21});

22if(settings.buttonImage){

23$button.css({

24'background-image':"url('"+settings.buttonImage+"')",

25'text-indent':'-9999px'

26});

27}

28$button.html('<spanclass="uploadify-button-text">'+settings.buttonText+'</span>')

29.css({

30'height':settings.height+'px',

31'line-height':settings.height+'px',

32'width':settings.width+'px',

33'margin-top':'-'+settings.height+'px'

34});

35//Appendthebuttontothewrapper

36$wrapper.append($button);

37

38//Createthefilequeue

39if(!settings.queueID){

40var$queue=$('<div/>',{

41'id':settings.id+'-queue',

42'class':'uploadify-queue'

43});

44$wrapper.after($queue);

45swfuploadify.settings.queueID=settings.id+'-queue';

46swfuploadify.settings.defaultQueue=true;

47}

48

49//Createsomequeuerelatedobjectsandvariables

50swfuploadify.queueData={

51files:{},//Thefilesinthequeue

52filesSelected:0,//Thenumberoffilesselectedinthelastselectoperation

53filesQueued:0,//Thenumberoffilesaddedtothequeueinthelastselectoperation

54filesReplaced:0,//Thenumberoffilesreplacedinthelastselectoperation

55filesCancelled:0,//Thenumberoffilesthatwerecancelledinsteadofreplaced

56filesErrored:0,//Thenumberoffilesthatcausederrorinthelastselectoperation

57uploadsSuccessful:0,//Thenumberoffilesthatweresuccessfullyuploaded

58uploadsErrored:0,//Thenumberoffilesthatreturnederrorsduringupload

59averageSpeed:0,//TheaveragespeedoftheuploadsinKB

60queueLength:0,//Thenumberoffilesinthequeue

61queueSize:0,//Thesizeinbytesoftheentirequeue

62uploadSize:0,//Thesizeinbytesoftheuploadqueue

63queueBytesUploaded:0,//Thesizeinbytesthathavebeenuploadedforthecurrentuploadqueue

64uploadQueue:[],//Thefilescurrentlytobeuploaded

65errorMsg:'某些文件无法加入到上传队列中:'

66};

67

68//Savereferencestoalltheobjects

69//swfuploadify.original=$clone;

70//swfuploadify.wrapper=$wrapper;

71//swfuploadify.button=$button;

72swfuploadify.queue=$queue;

73

74//Calltheuser-definediniteventhandler

75if(settings.onInit)settings.onInit.call($this,swfuploadify);

76

77}else{

78

79//Callthefallbackfunction

80if(settings.onFallback)settings.onFallback.call($this);

81

82}

代码从flash加载成功开始

最后我修改后的uploadify.js文件去除了一些英文提示,加入国人都能看懂的中文提示。

还修改了修正了一处Bug

//Triggeredwhenafileisnotaddedtothequeue

onSelectError:function(file,errorCode,errorMsg){

//Loadtheswfuploadsettings

varsettings=this.settings;

//Runthedefaulteventhandler

if($.inArray('onSelectError',settings.overrideEvents)<0){

switch(errorCode){

caseSWFUpload.QUEUE_ERROR.QUEUE_LIMIT_EXCEEDED:

if(settings.queueSizeLimit>errorMsg){

this.queueData.errorMsg+='\nThenumberoffilesselectedexceedstheremaininguploadlimit('+errorMsg+').';

}else{

this.queueData.errorMsg+='\nThenumberoffilesselectedexceedsthequeuesizelimit('+settings.queueSizeLimit+').';

}

break;

caseSWFUpload.QUEUE_ERROR.FILE_EXCEEDS_SIZE_LIMIT:

this.queueData.errorMsg+='\nThefile"'+file.name+'"exceedsthesizelimit('+settings.fileSizeLimit+').';

break;

caseSWFUpload.QUEUE_ERROR.ZERO_BYTE_FILE:

this.queueData.errorMsg+='\nThefile"'+file.name+'"isempty.';

break;

caseSWFUpload.QUEUE_ERROR.FILE_EXCEEDS_SIZE_LIMIT:      //这边bugSWFUpload.QUEUE_ERROR.INVALID_FILETYPE

this.queueData.errorMsg+='\nThefile"'+file.name+'"isnotanacceptedfiletype('+settings.fileTypeDesc+').';

break;

}

}

if(errorCode!=SWFUpload.QUEUE_ERROR.QUEUE_LIMIT_EXCEEDED){

deletethis.queueData.files[file.id];

}

//Calltheuser-definedeventhandler

if(settings.onSelectError)settings.onSelectError.apply(this,arguments);

},

官方的第四个selectError判断重复了,将其修改为caseSWFUpload.QUEUE_ERROR.INVALID_FILETYPE:

相关推荐