jquery uploadify 的使用
87453661 2014-04-19
官方的直接用会有一些问题
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:
