前端：(4) jQuery笔记----SWFUpload批量上传插件
SWFUpload是一个批量上传插件，在HTML4.1里面，估计也只有Flash+javascript配合才能够做到了。先复制个重要的网址，这个应该是官方的文档了，相当齐全。
http://leeon.me/upload/other/swfupload.html#uploadStart
这个是格式比较好看的。
http://www.cnblogs.com/2050/archive/2012/08/29/2662932.html
算了，这个文档的内容太多，各种属性各种方法，记不了这么多，直接贴上个实例算了。
前台是视图javascript代码：
<script src="@Url.Content("~/Scripts/Swfupload/swfupload.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/Swfupload/handlers.js")" charset="utf-8" type="text/javascript"></script>
<script type="text/javascript">
var swfu;
$(function () {
swfu = new SWFUpload({
//Backend Settings
upload_url: '@Url.Action("AjaxUploadPic")', //网上说一定要是绝对路径
// post_params: { "name": "value", "name": "value" }, //上传时可提交参数
post_params: {
"ASPSESSID": "<%=Session.SessionID %>",
},
use_query_string: false,
// File Upload Settings
file_size_limit: "200 MB", //文件最大值
file_types: "*.*", //文件类型，
file_types_description: "JPG Images",
file_upload_limit: "10", //Zero means unlimited
file_queue_limit: "10", //只允许一个文件
//文件上传事件驱动，冒号后边是函数（方法），方法放到 handlers.js 里面了，方便管理。
file_queue_error_handler: fileQueueError,
file_dialog_complete_handler: fileDialogComplete,
file_queued_handler: fileQueued,
upload_progress_handler: uploadProgress, //文件上传过程中定时触发，可用来显示上传进度
upload_error_handler: uploadError, //上传失败触发
upload_success_handler: uploadSuccess, //上传成功触发
upload_complete_handler: uploadComplete, //上传成功和失败都会触发
upload_start_handler: uploadStart, //上传前触发，一般可用来初始化提交参数
//FlashButton settings
button_image_url: '@Url.Content("~/Scripts/Swfupload/images/112.jpg")', //flash按钮背景，注意自己的路径。
button_placeholder_id: "spanButtonPlaceholder", //页面存放按钮的容器
button_width: 200,
button_height: 51,
button_text: '<span class="buttonCss"></span>', //按钮文本
button_text_style: ".button { font-family: Helvetica, Arial, sans-serif; font-size: 14pt; } .buttonSmall { font-size: 10pt; }", //按钮文本样式
button_text_top_padding: 1,
button_text_left_padding: 5,
button_cursor: SWFUpload.CURSOR.HAND,
button_action: SWFUpload.BUTTON_ACTION.SELECT_FILES, //多文件上传 单文件上传设置，详细见中文说明,页面有连接
//Flash Settings
flash_url: '@Url.Content("~/Scripts/Swfupload/swfupload.swf")',
custom_settings: { upload_target: "divFileProgressContainer" },
//Debug Settings
debug: false
});
});
</script>
handle处理javascript代码：
var fileCount;
function fileQueueError(file, errorCode, message) {
//alert(file.name + message);
try {
var imageName = "error.gif";
var errorName = "";
if (errorCode === SWFUpload.errorCode_QUEUE_LIMIT_EXCEEDED) {
errorName = "You have attempted to queue too many files.";
}
if (errorName !== "") {
alert(errorName);
return;
}
switch (errorCode) {
case SWFUpload.QUEUE_ERROR.ZERO_BYTE_FILE:
imageName = "zerobyte.gif";
break;
case SWFUpload.QUEUE_ERROR.FILE_EXCEEDS_SIZE_LIMIT:
imageName = "toobig.gif";
break;
case SWFUpload.QUEUE_ERROR.ZERO_BYTE_FILE:
case SWFUpload.QUEUE_ERROR.INVALID_FILETYPE:
default:
alert(message);
break;
}
addImage("images/" + imageName);
} catch (ex) {
this.debug(ex);
}
}
function fileQueued(file) {
try {
var progress = new FileProgress(file, this.customSettings.upload_target);
progress.setProgress(0);
progress.toggleCancel(true, this);
} catch (ex) {
this.debug(ex);
}
}
function uploadStart(file) {
this.addPostParam("bank", $(".in").val());
}
function fileDialogComplete(numFilesSelected, numFilesQueued) {
try {
if (numFilesQueued > 0) {
fileCount = numFilesQueued;
if ($("#itemId").val() == "") {
alert("Please save the basic information First!");
}
else {
this.addPostParam("itemId", $("#itemId").val());
this.startUpload(); //选择完成直接上传
}
}
} catch (ex) {
this.debug(ex);
}
}
function uploadProgress(file, bytesLoaded) {
try {
var percent = Math.ceil((bytesLoaded / file.size) * 100);
var progress = new FileProgress(file, this.customSettings.upload_target);
progress.setProgress(percent);
if (percent === 100) {
progress.toggleCancel(false, this);
} else {
progress.toggleCancel(true, this);
}
} catch (ex) {
this.debug(ex);
}
}
var imagesCount = -1;
function uploadSuccess(file, serverData) {
imagesCount++;
try {
var image = strToJson(serverData);
if (image.success == "0") {
alert(image.name);
}
else {
$(".album_list li").eq(imagesCount).find("img").attr("src", image.name);
}
var progress = new FileProgress(file, this.customSettings.upload_target);
progress.toggleCancel(false);
} catch (ex) {
this.debug(ex);
}
//alert(serverData);
}
var iCount = 0;
function itemUpdateuploadSuccess(file, serverData) {
iCount++;
var image = strToJson(serverData);
if (image.success == "0") {
alert(image.name);
}
else {
var dom = $("<li><img src='" + image.name + "' alt='' /></li>");
$(".album_list").append(dom);
}
if (iCount == fileCount) {
alert("upload success!")
}
var progress = new FileProgress(file, this.customSettings.upload_target);
progress.toggleCancel(false);
}
function strToJson(str) {
var json = (new Function("return " + str))();
return json;
}
function uploadComplete(file) {
try {
var progress = new FileProgress(file, this.customSettings.upload_target);
progress.setComplete();
if (this.getStats().files_queued > 0) {
this.startUpload();
} else {
progress.toggleCancel(false);
}
} catch (ex) {
this.debug(ex);
}
}
function uploadError(file, errorCode, message) {
var imageName = "error.gif";
var progress;
try {
switch (errorCode) {
case SWFUpload.UPLOAD_ERROR.FILE_CANCELLED:
try {
progress = new FileProgress(file, this.customSettings.upload_target);
progress.setCancelled();
progress.toggleCancel(false);
}
catch (ex1) {
this.debug(ex1);
}
break;
case SWFUpload.UPLOAD_ERROR.UPLOAD_STOPPED:
try {
progress = new FileProgress(file, this.customSettings.upload_target);
progress.setCancelled();
progress.toggleCancel(true);
}
catch (ex2) {
this.debug(ex2);
}
case SWFUpload.UPLOAD_ERROR.UPLOAD_LIMIT_EXCEEDED:
imageName = "uploadlimit.gif";
break;
default:
alert(message);
break;
}
addImage("images/" + imageName);
} catch (ex3) {
this.debug(ex3);
}
}
function addImage(src) {
var newImg = document.createElement("img"