旧版的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的痛苦