jquery uploadify 的使用

爱被打了一巴掌 2022-04-22 14:26 166阅读 0赞

官方的直接用会有一些问题  
  
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);  
和  
// Adjust the styles of the movie  
$('\#' + swfuploadify.movieName).css(\{  
　　'position' : 'absolute',  
　　'z-index' : 1  
\});  
大家应该找到共同之处了，原因就是调用了 flash 生成的object对象，我的解决方法是避免调用这个对象，所以我在项目中将我的上传按钮 强制必须 要求放到一个div（容器,p标签，span标签都行）中  
官方也就是想把Object对象放入到一个div中进行处理，我也就按他们的意思，只不过反其道而位置  
不多说，贴代码  
1 if (flashInstalled) \{  
2 var swfuploadify = new SWFUpload(swfUploadSettings); ;  
3  
4 // Add the SWFUpload object to the elements data object  
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 // Recreate the reference to wrapper  
13 var $wrapper = $('\#' + settings.id);  
14 // Add the data object to the wrapper  
15 $wrapper.data('uploadify', swfuploadify);  
16  
17 // Create the button  
18 var $button = $('<div />', \{  
19 'id': settings.id + '-button',  
20 'class': 'uploadify-button ' + settings.buttonClass  
21 \});  
22 if (settings.buttonImage) \{  
23 $button.css(\{  
24 'background-image': "url('" + settings.buttonImage + "')",  
25 'text-indent': '-9999px'  
26 \});  
27 \}  
28 $button.html('<span class="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 // Append the button to the wrapper  
36 $wrapper.append($button);  
37  
38 // Create the file queue  
39 if (!settings.queueID) \{  
40 var $queue = $('<div />', \{  
41 'id': settings.id + '-queue',  
42 'class': 'uploadify-queue'  
43 \});  
44 $wrapper.after($queue);  
45 swfuploadify.settings.queueID = settings.id + '-queue';  
46 swfuploadify.settings.defaultQueue = true;  
47 \}  
48  
49 // Create some queue related objects and variables  
50 swfuploadify.queueData = \{  
51 files: \{\}, // The files in the queue  
52 filesSelected: 0, // The number of files selected in the last select operation  
53 filesQueued: 0, // The number of files added to the queue in the last select operation  
54 filesReplaced: 0, // The number of files replaced in the last select operation  
55 filesCancelled: 0, // The number of files that were cancelled instead of replaced  
56 filesErrored: 0, // The number of files that caused error in the last select operation  
57 uploadsSuccessful: 0, // The number of files that were successfully uploaded  
58 uploadsErrored: 0, // The number of files that returned errors during upload  
59 averageSpeed: 0, // The average speed of the uploads in KB  
60 queueLength: 0, // The number of files in the queue  
61 queueSize: 0, // The size in bytes of the entire queue  
62 uploadSize: 0, // The size in bytes of the upload queue  
63 queueBytesUploaded: 0, // The size in bytes that have been uploaded for the current upload queue  
64 uploadQueue: \[\], // The files currently to be uploaded  
65 errorMsg: '某些文件无法加入到上传队列中:'  
66 \};  
67  
68 // Save references to all the objects  
69 //swfuploadify.original = $clone;  
70 //swfuploadify.wrapper = $wrapper;  
71 //swfuploadify.button = $button;  
72 swfuploadify.queue = $queue;  
73  
74 // Call the user-defined init event handler  
75 if (settings.onInit) settings.onInit.call($this, swfuploadify);  
76  
77 \} else \{  
78  
79 // Call the fallback function  
80 if (settings.onFallback) settings.onFallback.call($this);  
81  
82 \}  
代码从flash加载成功开始  
  
最后我修改后的uploadify.js文件去除了一些英文提示，加入国人都能看懂的中文提示。  
  
还修改了修正了一处Bug  
  
// Triggered when a file is not added to the queue  
onSelectError : function(file, errorCode, errorMsg) \{  
// Load the swfupload settings  
var settings = this.settings;  
  
// Run the default event handler  
if ($.inArray('onSelectError', settings.overrideEvents) < 0) \{  
switch(errorCode) \{  
case SWFUpload.QUEUE\_ERROR.QUEUE\_LIMIT\_EXCEEDED:  
if (settings.queueSizeLimit > errorMsg) \{  
this.queueData.errorMsg += '\\nThe number of files selected exceeds the remaining upload limit (' + errorMsg + ').';  
\} else \{  
this.queueData.errorMsg += '\\nThe number of files selected exceeds the queue size limit (' + settings.queueSizeLimit + ').';  
\}  
break;  
case SWFUpload.QUEUE\_ERROR.FILE\_EXCEEDS\_SIZE\_LIMIT:  
this.queueData.errorMsg += '\\nThe file "' + file.name + '" exceeds the size limit (' + settings.fileSizeLimit + ').';  
break;  
case SWFUpload.QUEUE\_ERROR.ZERO\_BYTE\_FILE:  
this.queueData.errorMsg += '\\nThe file "' + file.name + '" is empty.';  
break;  
case SWFUpload.QUEUE\_ERROR.FILE\_EXCEEDS\_SIZE\_LIMIT:　　　　　　//这边bug SWFUpload.QUEUE\_ERROR.INVALID\_FILETYPE  
this.queueData.errorMsg += '\\nThe file "' + file.name + '" is not an accepted file type (' + settings.fileTypeDesc + ').';  
break;  
\}  
\}  
if (errorCode != SWFUpload.QUEUE\_ERROR.QUEUE\_LIMIT\_EXCEEDED) \{  
delete this.queueData.files\[file.id\];  
\}  
  
// Call the user-defined event handler  
if (settings.onSelectError) settings.onSelectError.apply(this, arguments);  
\},  
官方的第四个selectError判断重复了，将其修改为case SWFUpload.QUEUE\_ERROR.INVALID\_FILETYPE: