JQuery上传插件uploadify优化

旧版的uploadify是基于flash上传的，但是总有那么些问题，让我们用的不是很舒服。今天主要分享下在项目中用uploadify遇到的一些问题，以及优化处理

官方下载

官方文档

官方演示

下面是官方下载包含的一些文件，当然很多我们在项目中是不需要的

效果图：

下面贴代码：

 document.write('<link href="/js/uploadify/uploadify.css" rel="stylesheet" type="text/css" />');
 document.write('<script src="/js/uploadify/jquery.uploadify.js" type="text/javascript"></script>');
 (function ($) {
     $.fn.uploadDOC = function (callback, guid, url, queueID,removeCompleted) {
         /// <summary>
         ///     基于jQuery上传插件uploadify封装。
         /// </summary>
         /// <param name="callback" type="function">
         ///     上传成功时执行的回调函数。
         /// </param>
         /// <param name="guid" type="String">
         ///     传入产生的随机guid。
         /// </param>
         /// <param name="url" type="String">
         ///     传入地址。
         /// </param>
         /// <param name="queueID" type="String">
         ///     上传队列展示的div或span对应的id。
         /// </param>
         /// <param name="removeCompleted" type="Boolean">
         ///     移除已上传成功的队列。Ture:执行移除；False:保留队列。
         /// </param>
         $(this).uploadify({
             'auto': true,
             'buttonImage': '/images/bjdz_btn_xzwj.gif',
             'buttonText': '点击上传',
             'fileSizeLimit': '5MB',
             'fileTypeDesc': '请选择Word文件',
             'fileTypeExts': '*.doc;*.docx',
             'height': 27,
             'method': 'post',
             'multi': false,
             'queueID': queueID == undefined ? "some" : queueID,
             'queueSizeLimit': 1,
             'removeCompleted': removeCompleted,
             'swf': '/js/uploadify/uploadify.swf',
             'uploader': url == undefined ? 'http://imgupload.kuaiyoudai.com/user/uploadcommon.ashx?para=' + guid : url,
             'width': 76,
             'overrideEvents': ['onUploadSuccess'],
             'onUploadSuccess': function onUploadSuccess(file, data, response) {
                                     if (typeof callback === "function") {
                                         if (response) {
                                             callback(data);
                                         }
                                     }
                                 }
         });
     }

     $.fn.upload = function (callback, guid, url, queueID, removeCompleted) {
         /// <summary>
         ///     基于jQuery上传插件uploadify封装。
         /// </summary>
         /// <param name="callback" type="function">
         ///     上传成功时执行的回调函数。
         /// </param>
         /// <param name="guid" type="String">
         ///     传入产生的随机guid。
         /// </param>
         /// <param name="url" type="String">
         ///     传入地址。
         /// </param>
         /// <param name="queueID" type="String">
         ///     上传队列展示的div或span对应的id。
         /// </param>
         /// <param name="removeCompleted" type="Boolean">
         ///     移除已上传成功的队列。Ture:执行移除；False:保留队列。
         /// </param>
         $(this).uploadify({
             'auto': true,
             'buttonImage': '/images/bjdz_btn_xzwj.gif',
             'buttonText': '点击上传',
             'fileSizeLimit': '5MB',
             'fileTypeDesc': '请选择图片文件',
             'fileTypeExts': '*.jpg;*.jpeg;*.gif;*.png;',
             'height': 27,
             'method': 'post',
             'multi': false,
             'queueID': queueID == undefined ? "some" : queueID,
             'queueSizeLimit': 1,
             'removeCompleted': removeCompleted,
             'swf': '/js/uploadify/uploadify.swf',
             'uploader': url == undefined ? 'http://imgupload.kuaiyoudai.com/user/uploadcommon.ashx?para=' + guid : url,
             'width': 76,
             'overrideEvents': ['onUploadSuccess'],
             'onUploadSuccess': function onUploadSuccess(file, data, response) {
                                     if (typeof callback === "function") {
                                         if (response) {
                                             callback(data);
                                         }
                                     }
                                 }
         });
     }
 })($);

upload.js

前台代码：

 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Demo.aspx.cs" Inherits="uploadify_Demo.Demo" %>

 <!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 runat="server">
     <title></title>
     <script src="/js/jquery-1.8.3.js" type="text/javascript"></script>
     <script src="/js/upload.js" type="text/javascript"></script>
     <script type="text/javascript">
         $(function () {
             $("#btn_Upload").upload(function (data) { alert(data); }, "<%= Guid.NewGuid().ToString() %>");
         });
     </script>
 </head>
 <body>
     <form id="form1" runat="server">
     <div>
         <input type="button" name="" value="上传文件" id="btn_Upload" />
     </div>
     </form>
 </body>
 </html>

Demo.html

下面分享下开发中遇到的问题：

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

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中进行处理，我也就按他们的意思，只不过反其道而位置

不多说，贴代码

 if (flashInstalled) {
     var swfuploadify = new SWFUpload(swfUploadSettings); ;

     // Add the SWFUpload object to the elements data object
     $this.data('uploadify', swfuploadify);

     $('#' + swfuploadify.movieName).parent().attr('id', settings.id).addClass('uploadify').css({
         'height': settings.height + 'px',
         'width': settings.width + 'px'
     });

     // Recreate the reference to wrapper
     var $wrapper = $('#' + settings.id);
     // Add the data object to the wrapper
     $wrapper.data('uploadify', swfuploadify);

     // Create the button
     var $button = $('<div />', {
         'id': settings.id + '-button',
         'class': 'uploadify-button ' + settings.buttonClass
     });
     if (settings.buttonImage) {
         $button.css({
             'background-image': "url('" + settings.buttonImage + "')",
             'text-indent': '-9999px'
         });
     }
     $button.html('<span class="uploadify-button-text">' + settings.buttonText + '</span>')
     .css({
         'height': settings.height + 'px',
         'line-height': settings.height + 'px',
         'width': settings.width + 'px',
         'margin-top': '-' + settings.height + 'px'
     });
     // Append the button to the wrapper
     $wrapper.append($button);

     // Create the file queue
     if (!settings.queueID) {
         var $queue = $('<div />', {
             'id': settings.id + '-queue',
             'class': 'uploadify-queue'
         });
         $wrapper.after($queue);
         swfuploadify.settings.queueID = settings.id + '-queue';
         swfuploadify.settings.defaultQueue = true;
     }

     // Create some queue related objects and variables
     swfuploadify.queueData = {
         files: {}, // The files in the queue
         filesSelected: 0, // The number of files selected in the last select operation
         filesQueued: 0, // The number of files added to the queue in the last select operation
         filesReplaced: 0, // The number of files replaced in the last select operation
         filesCancelled: 0, // The number of files that were cancelled instead of replaced
         filesErrored: 0, // The number of files that caused error in the last select operation
         uploadsSuccessful: 0, // The number of files that were successfully uploaded
         uploadsErrored: 0, // The number of files that returned errors during upload
         averageSpeed: 0, // The average speed of the uploads in KB
         queueLength: 0, // The number of files in the queue
         queueSize: 0, // The size in bytes of the entire queue
         uploadSize: 0, // The size in bytes of the upload queue
         queueBytesUploaded: 0, // The size in bytes that have been uploaded for the current upload queue
         uploadQueue: [], // The files currently to be uploaded
         errorMsg: '某些文件无法加入到上传队列中:'
     };

     // Save references to all the objects
     //swfuploadify.original = $clone;
     //swfuploadify.wrapper = $wrapper;
     //swfuploadify.button = $button;
     swfuploadify.queue = $queue;

     // Call the user-defined init event handler
     if (settings.onInit) settings.onInit.call($this, swfuploadify);

 } else {

     // Call the fallback function
     if (settings.onFallback) settings.onFallback.call($this);

 }

代码从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:

下面贴个项目的下载地址，虽然很简单，但是免去大家重写js的痛苦

uploadify_Demo