jquery+swfupload打造文件批量上传
swfupload组件功能强悍，比较灵活，界面可以自己设计，这里我用jquery把swfupload的设置和事件简单的封装了下，可以直接使用在项目中，只需将后端程序修改替换成合适的语言，我这个是asp版的。
不多说了，直接上代码：
<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>asp+jquery+swfupload批量上传组件</title>
<style type="text/css">
<!--
body, td, th {
font-size: 12px;
color: #333;
}
* {
margin:0;
padding:0;
}
.upLoadBox {
position:absolute;
width:460px;
height:300px;
left:50%;
margin-left:-230px;
top:50%;
margin-top:-150px;
border:1px solid #000;
background-color:#FFF;
z-index:9999;
}
.upLoadTitle {
height:28px;
line-height:28px;
background-color:#333;
color:#FFF;
cursor:move
}
.upLoadTitle span {
float:left;
margin-left:10px;
}
#upLoadForm {
padding:10px;
border-bottom:1px solid #D5D5D5;
}
#upLoadForm span {
float:right;
color:#666
}
.colseUplaodBox {
color:#FFF;
float:right;
margin-right:10px;
text-decoration:none
}
.innerBox {
width:460px;
height:226px;
overflow:auto
}
#wrapBox {
position:fixed;
width:100%;
height:100%;
left:0;
top:0;
bottom:auto;
background-color:#000;
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
z-index:9998;
}
/* 上面的是除了IE6的主流浏览器通用的方法 */
*html #wrapBox {/*ie6 hack*/
position:absolute;
bottom:auto;
top:expression(eval(document.documentElement.scrollTop));
zoom:-1;
}
/* 修正IE6振动bug */
* html, * html body {
background-image:url(about:blank);
background-attachment:fixed;
height:100%;
}
.fileList {
width:96%;
margin:5px auto;
list-style:none;
margin:0 auto;
padding:0;
}
.fileList li {
border-bottom:1px dashed #E3E3E3;
padding:5px 0;
}
.fileList li p {
width:100%;
clear:both;
overflow:hidden;
zoom:-1;
margin:5px auto;
}
.fileList li span {
display:inline-block;
float: left;
}
.fileList li s {
text-decoration:none;
color:#F00;
margin:0 3px;
}
.progress {
width:350px;
border:1px solid #D5D5D5;
height:12px;
margin-right:10px;
}
.fileList li .delFile {
color:#C00;
margin-left:10px;
}
.fileList li .progress s {
display:inline-block;
background-color:#9C0;
width:0%;
height:12px;
margin:0;
}
.welcome {
height:50px;
line-height:50px;
text-align:center;
}
-->
</style>
<script type="text/javascript" src="../js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="../swfupload/swfupload.js"></script>
<script type="text/javascript" src="../js/drag.js"></script>
<script type="text/javascript">
var upLoadBox = {
swfu: null,
init: function(options) {
var self = this;
var defaults = {
flash_url: "../swfupload/swfupload.swf",
flash9_url: "../swfupload/swfupload_fp9.swf",
upload_url: "upload.asp", //asp上传程序
post_params: {
"PHPSESSID": ""
},
file_size_limit: 0,
file_types: "*.*",
file_types_description: "All Files",
file_upload_limit: 100,
file_queue_limit: 0,
debug: false,
// Button settings
button_image_url: "../swfupload/XPButtonNoText_61x22.png",
button_width: "61",
button_height: "22",
button_placeholder_id: "spanButtonPlaceHolder",
button_text: '浏览',
button_text_left_padding: 15,
button_text_top_padding: 0,
// The event handler functions are defined
swfupload_preload_handler: self.preLoad,
swfupload_load_failed_handler: self.loadFailed,
file_queued_handler: self.fileQueued,
file_queue_error_handler: self.fileQueueError,
file_dialog_complete_handler: self.fileDialogComplete,
upload_start_handler: self.uploadStart,
upload_progress_handler: self.uploadProgress,
upload_error_handler: self.uploadError,
upload_success_handler: self.uploadSuccess,
upload_complete_handler: self.uploadComplete
//queue_complete_handler : queueComplete // Queue plugin event
}
var opts = $.extend({}, defaults, options);
var fileSizeLimit = !opts.file_size_limit ? "单文件大小无限制" : "单文件大小不超过" + opts.file_size_limit + "M";
var boxHtml = "<div id='wrapBox'></div>";
boxHtml += "<div class='upLoadBox'>";
boxHtml += "<div class='upLoadTitle'><span>上传文件</span> <a href='#' class='colseUplaodBox'>[关闭]</a></div>";
boxHtml += "<form id='upLoadForm' action='index.asp' method='post' enctype='multipart/form-data'>";
boxHtml += "<span id='spanButtonPlaceHolder'></span> <span>(" + fileSizeLimit + ")</span>";
boxHtml += "</form>";
boxHtml += "<div class='innerBox'>";
boxHtml += "<p class='welcome'>欢迎使用批量上传组件</p>";
boxHtml += "</div>";
boxHtml += "</div>";
$("body").append($(boxHtml));
var upLoadBox = $("div.upLoadBox"),
colseUplaodBox = upLoadBox.find("a.colseUplaodBox");
//拖曳窗口
upLoadBox.drag({
handler: $('.upLoadTitle'),
opacity: 0.8
});
//关闭窗口
colseUplaodBox.click(function(event) {
event.preventDefault();
self.colseUploadBox();
});
//初始化swfupland组件
self.swfu = new SWFUpload(options);
},
//关闭窗口
colseUploadBox: function() {
var upLoadBox = $("div.upLoadBox"),
colseUplaodBox = upLoadBox.find("a.colseUplaodBox"),
wrapBox = $("#wrapBox");
upLoadBox.empty().remove();
wrapBox.remove();
},
preLoad: function() {
if (!this.support.loading) {
alert("需要安装9.028以上的flashPlayer");
return false;
}
},
loadFailed: function() {
function loadFailed() {
alert("加载失败");
}
},
fileQueued: function(file) {
try {
var innerBox = $("div.innerBox"),
welcome = $("p.welcome");
var fileList = "<ul class='fileList'>";
fileList += "<li id='" + file.id + "'>";
fileList += "<p class='fileName'>" + file.name + "</p>";
fileList += "<p><span class='progress'><s></s></span><span class='jdNum'>0%</span> <a href='#' class='delFile'>删除</a></p>";
fileList += "<p class='info'>等待上传...</p>";
fileList += "</li>";
fileList += "</ul>";
welcome.remove();
innerBox.append($(fileList));
$("a.delFile").click(function(event) {
event.preventDefault();
var p = $(this).parent().parent(),
fid = p.attr("id");
upLoadBox.swfu.cancelUpload(fid, false);
p.remove();
});
} catch (ex) {
this.debug(ex);
}
},
fileQueueError: function(file, errorCode, message) {
var welcome = $("p.welcome");
try {
if (errorCode === SWFUpload.QUEUE_ERROR.QUEUE_LIMIT_EXCEEDED) {
alert("你一次上传的文件超过设置");
return;
}
switch (errorCode) {
case SWFUpload.QUEUE_ERROR.FILE_EXCEEDS_SIZE_LIMIT:
welcome.text("错误提示：文件太大，文件名： " + file.name + ", 文件大小： " + file.size + ", Message: " + message);
this.debug("错误提示：文件太大，文件名： " + file.name + ", 文件大小： " + file.size + ", Message: " + message);
break;
case SWFUpload.QUEUE_ERROR.ZERO_BYTE_FILE:
welcome.text("错误提示：零字节文件，文件名：" + file.name + ", 文件大小： " + file.size + ", Message: " + message);
this.debug("错误提示：零字节文件，文件名：" + file.name + ", 文件大小： " + file.size + ", Message: " + message);
break;
case SWFUpload.QUEUE_ERROR.INVALID_FILETYPE:
welcome.text("错误提示：无效的文件类型，文件名：" + file.name + ", 文件大小：" + file.size + ", Message: " + message);
this.debug("错误提示：无效的文件类型，文件名：" + file.name + ", 文件大小：" + file.size + ", Message: " + message);
break;
default:
if (file !== null) {
welcome.text("未处理的错误");
}
this.debug("Error Code: " + errorCode + ", File name: " + file.name + ", File size: " + file.size + ", Message: " + message);
break;
}
} catch (ex) {
this.debug(ex);
}
},
fileDialogComplete: function(numFilesSelected, numFilesQueued) {
try {
this.startUpload();
} catch (ex) {
this.debug(ex);
}
},
uploadStart: function(file) {
try {
var stats = $("#" + file.id).find("p.info");
stats.html("已上传<s class='yscSize'>0</s>Kb");
} catch (ex) {}
return true;
},
uploadProgress: function(file, bytesLoaded, bytesTotal) {
try {
var percent = Math.ceil((bytesLoaded / bytesTotal) * 100);
var fileList = $("#" + file.id),
progress = fileList.find(".progress"),
jdNum = fileList.find(".jdNum"),
yscSize = fileList.find("s.yscSize");
progress.find("s").css("width", percent + "%");
jdNum.html(percent + "%");
yscSize.text(bytesLoaded);
} catch (ex) {
this.debug(ex);
}
},
uploadSuccess: function(file, serverData) {
try {
var stats = $("#" + file.id).find("p.info");
stats.html("<s>上传成功</s>");
} catch (ex) {
this.debug(ex);
}
},
uploadError: function(file, errorCode, message) {
try {
var stats = $("#" + file.id).find("p.info");
switch (errorCode) {
case SWFUpload.UPLOAD_ERROR.HTTP_ERROR:
stats.text("上传错误: " + message);
this.debug("错误提示：http错误，文件名：" + file.name + ", 信息： " + message);
break;
case SWFUpload.UPLOAD_ERROR.UPLOAD_FAILED:
stats.text("上传失败");
this.debug("错误提示：上传失败，文件名称: " + file.name + ", 文件大小：" + file.size + ", 信息：" + message);
break;
case SWFUpload.UPLOAD_ERROR.IO_ERROR:
stats.text("服务器错误");
this.debug("错误提示：服务器错误, 文件名称: " + file.name + ", 信息： " + message);
break;
case SWFUpload.UPLOAD_ERROR.SECURITY_ERROR:
progress.setStatus("安全性错误");
this.debug("错误提示： 安全性错误, 文件名称: " + file.name + ", 信息： " + message);
break;
case SWFUpload.UPLOAD_ERROR.UPLOAD_LIMIT_EXCEEDED:
progress.setStatus("上传超过限制。");
this.debug("错误提示：上传超过限制,文件名称: " + file.name + ", 文件大小： " + file.size + ", 信息：" + message);
break;
case SWFUpload.UPLOAD_ERROR.FILE_VALIDATION_FAILED:
progress.setStatus("验证失败。上传跳过。");
this.debug("错误提示： 验证失败，上传跳过。文件名称: " + file.name + ", 文件大小： " + file.size + ", 信息：" + message);
break;
case SWFUpload.UPLOAD_ERROR.FILE_CANCELLED:
break;
case SWFUpload.UPLOAD_ERROR.UPLOAD_STOPPED:
stats.text("停止");
break;
default:
stats.text("未知错误: " + errorCode);
this.debug("错误提示： " + errorCode + ", 文件名称: " + file.name + ", 文件大小：" + file.size + ", 信息： " + message);
break;
}
} catch (ex) {
this.debug(ex);
}
},
uploadComplete: function(file) {
console.log(this);
var self = this;
if (file.filestatus != -5) {
$.ajax({
type: "POST",
url: "uploadAjax.asp",
data: file,
success: function(ret) {
if (ret != "" && self.getStats().files_queued !== 0) {
self.startUpload();
}
}
});
} else {
self.startUpload();
}
}
};
window.onload = function() {
//swfupload 设置
var settings = {
flash_url : "../swfupload/swfupload.swf",
flash9_url : "../swfupload/swfupload_fp9.swf",
upload_url: "upload.asp",
post_params: {"PHPSESSID" : "<%randomize:response.write replace(replace(replace(replace(now&rnd(),"-",""),":","")," ",""),".","")%>"},
file_size_limit :0,
file_types : "*.*",
file_types_description : "All Files",
file_upload_limit : 100,
file_queue_limit : 0,
debug:false,
// Button settings
button_image_url: "../swfupload/XPButtonNoText_61x22.png",
button_width: "61",
button_height: "22",
button_placeholder_id: "spanButtonPlaceHolder",
button_text: '浏览',
button_text_left_padding: 15,
button_text_top_padding: 0,
// The event handler functions are defined in handlers.js
swfupload_preload_handler : upLoadBox.preLoad,
swfupload_load_failed_handler : upLoadBox.loadFailed,
file_queued_handler : upLoadBox.fileQueued,
file_queue_error_handler : upLoadBox.fileQueueError,
file_dialog_complete_handler : upLoadBox.fileDialogComplete,
upload_start_handler : upLoadBox.uploadStart,
upload_progress_handler : upLoadBox.uploadProgress,
upload_error_handler : upLoadBox.uploadError,
upload_success_handler : upLoadBox.uploadSuccess,
upload_complete_handler : upLoadBox.uploadComplete
//queue_complete_handler : queueComplete // Queue plugin event
};
$("#button").click(function(){
upLoadBox.init(settings);
});
};
</script>
</head>
<body>
<label>
<input type="button" name="button" id="button" value="上传文件" />
</label>
</body>
</html>
原文地址：http://www.muzilei.com/archives/342