您的位置：首页 > Web前端 > JQuery

JQuery上传插件uploadify优化

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

官方下载

官方文档

官方演示

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

<%@ 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
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航