SWFUpload是一个批量上传插件，在HTML4.1里面，估计也只有Flash+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 = $("![](" + image.name + ")
"
);
$(".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"
);
newImg.style.margin = "5px"
;
document.getElementById("thumbnails"
).appendChild(newImg);
if (newImg.filters) {
try {
newImg.filters.item("DXImageTransform.Microsoft.Alpha").opacity = 0
;
} catch (e) {
// If it is not set initially, the browser will throw an error. This will set it if it is not set yet.
newImg.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity=' + 0 + ')'
;
}
} else {
newImg.style.opacity = 0
;
}
newImg.onload =
function() {
fadeIn(newImg, 0
);
};
newImg.src =
src;
}
function fadeIn(element, opacity) {
var reduceOpacityBy = 5
;
var rate = 30;
// 15 fps
if (opacity < 100
) {
opacity +=
reduceOpacityBy;
if (opacity > 100
) {
opacity = 100
;
}
if (element.filters) {
try {
element.filters.item("DXImageTransform.Microsoft.Alpha").opacity =
opacity;
} catch (e) {
// If it is not set initially, the browser will throw an error. This will set it if it is not set yet.
element.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity=' + opacity + ')'
;
}
} else {
element.style.opacity = opacity / 100
;
}
}
if (opacity < 100
) {
setTimeout(function() {
fadeIn(element, opacity);
}, rate);
}
}
/* ******************************************
* FileProgress Object
* Control object for displaying file info
* ****************************************** */
function FileProgress(file, targetID) {
if (file.filestatus != -5
) {
this.fileProgressID =
file.id;
this.fileProgressWrapper = document.getElementById(
this.fileProgressID);
if (
this.fileProgressWrapper ==
null) {
this.fileProgressWrapper = document.createElement("div"
);
this.fileProgressWrapper.className = "progressWrapper"
;
this.fileProgressWrapper.id =
this.fileProgressID;
this.fileProgressElement = document.createElement("div"
);
this.fileProgressElement.className = "progressContainer"
;
var progressCancel = document.createElement("a"
);
progressCancel.className = "progressCancel"
;
progressCancel.href = "#"
;
progressCancel.innerHTML = "delete"
;
var progressText = document.createElement("div"
);
progressText.className = "progressName"
;
progressText.appendChild(document.createTextNode(file.name + " (" + (file.size / 1024000).toFixed(2) + " MB)"
));
var progressBar = document.createElement("div"
);
progressBar.className = "progressBarInProgress"
;
var progressStatus = document.createElement("div"
);
progressStatus.className = "progressBarStatus"
;
this.fileProgressElement.appendChild(progressText);
this.fileProgressElement.appendChild(progressStatus);
progressStatus.appendChild(progressBar);
this.fileProgressElement.appendChild(progressCancel);
this.fileProgressWrapper.appendChild(
this.fileProgressElement);
document.getElementById(targetID).appendChild(this.fileProgressWrapper);
fadeIn(this.fileProgressWrapper, 0
);
} else {
this.fileProgressElement =
this.fileProgressWrapper.firstChild;
//this.fileProgressElement.childNodes[1].firstChild.nodeValue = file.name;
}
this.height =
this.fileProgressWrapper.offsetHeight;
}
}
FileProgress.prototype.setProgress =
function(percentage) {
this.fileProgressElement.className = "progressContainer green"
;
this.fileProgressElement.childNodes[1].childNodes[0].className = "progressBarInProgress"
;
this.fileProgressElement.childNodes[1].childNodes[0].style.width = percentage + "%"
;
};
FileProgress.prototype.setComplete =
function() {
this.fileProgressElement.className = "progressContainer blue"
;
this.fileProgressElement.childNodes[1].childNodes[0].className = "progressBarInProgress"
;
this.fileProgressElement.childNodes[1].childNodes[0].style.width = "100%"
;
var progressOk = document.createElement("span"
);
progressOk.className = "progressOk"
;
progressOk.innerHTML = "ok"
;
this.fileProgressWrapper.childNodes[0
].appendChild(progressOk);
};
FileProgress.prototype.setError =
function() {
this.fileProgressElement.className = "progressContainer red"
;
this.fileProgressElement.childNodes[1].childNodes[0].className = "progressBarError"
;
this.fileProgressElement.childNodes[1].childNodes[0].style.width = ""
;
};
FileProgress.prototype.setCancelled =
function() {
this.fileProgressElement.className = "progressContainer"
;
this.fileProgressElement.childNodes[1].childNodes[0].className = "progressBarError"
;
this.fileProgressElement.childNodes[1].childNodes[0].style.width = ""
;
};
//FileProgress.prototype.setStatus = function(status) {
// this.fileProgressElement.childNodes[2].innerHTML = status;
//};
FileProgress.prototype.toggleCancel =
function(show, swfuploadInstance) {
this.fileProgressElement.childNodes[2].style.display = show ? "block" : "none"
;
if (swfuploadInstance) {
var fileID =
this.fileProgressID;
var filePro =
this.fileProgressElement.childNodes[2
];
filePro.onclick =
function() {
var f =
document.getElementById(fileID);
f.parentNode.removeChild(f);
swfuploadInstance.cancelUpload(fileID);
return false;
};
}
};
public ActionResult AjaxUploadPic()
{
PublicCRUD_Respository CRUD = new PublicCRUD_Respository();
HttpPostedFileBase PostedFile = null;
PostedFile = HttpContext.Request.Files[0];
string itemId = HttpContext.Request.Form["itemId"];
int ItemId = -1;
if (!string.IsNullOrEmpty(itemId))
{
ItemId = Convert.ToInt32(itemId);
}
if(ItemId == -1)
{
return Content("");
}
MariItemInfo Entity = CRUD.SelectById(ItemId);
if (Entity.Create.UserId != CurrentUser.UserId)
{
return Content("");
}
object json = null;
if (PostedFile != null)
{
bool success;
string result;
int count = (int)CRUD.Select_Unique_BySQL("select count(ItemId) from Mari_ItemInfo_Album where itemId = " + ItemId);
if (count < 10)
{
result = UploadFile.SaveFile(PostedFile, UploadFile.PicPath, out success);
if (success)
{
FileInfo fileInfo = new FileInfo(result);
//路径存入数据库
if (ItemId != -1)
{
MariItemInfoAlbum AlbumEntity = new MariItemInfoAlbum();
AlbumEntity.CreateTime = DateTime.Now;
AlbumEntity.Pic = UploadFile.UrlConvertor(fileInfo.FullName);
AlbumEntity.PicStatus = true;
AlbumEntity.PicQuality = 10;
MariItemInfo ItemEntity = new MariItemInfo();
ItemEntity.ItemId = ItemId;
AlbumEntity.MariItemInfo = ItemEntity;
CRUD.Insert(AlbumEntity);
}
json = new { success = 1, name = UploadFile.UrlConvertor(fileInfo.FullName) };
}
else
{
json = new { success = 0, name = "图片保存失败" };
}
}
else
{
json = new { success = 0, name = "一个用户最多只能上传10张图片!" };
}
}
else
{
json = new { success = 0 };
}
return Json(json, "text/html", JsonRequestBehavior.AllowGet);
}
值得说的是，当页面需要Session验证才能操作的时候在Chrome和火狐浏览器里会上传不了，据说是Session的问题，这个时候可以在Global.asax里面加入下段代码：
protected void Application_Start()
{
//火狐，谷歌批量上传兼容
Matchmaking.Infrastructure.SwfUploadCompatible.FireFoxCompatible();
AreaRegistration.RegisterAllAreas();
RegisterGlobalFilters(GlobalFilters.Filters);
RegisterRoutes(RouteTable.Routes);
}
public static void FireFoxCompatible()
{
try
{
string session_param_name = "ASPSESSID";
string session_cookie_name = "ASP.NET_SESSIONID";
if (HttpContext.Current.Request.Form[session_param_name] != null)
{
UpdateCookie(session_cookie_name, HttpContext.Current.Request.Form[session_param_name]);
}
else if (HttpContext.Current.Request.QueryString[session_param_name] != null)
{
UpdateCookie(session_cookie_name, HttpContext.Current.Request.QueryString[session_param_name]);
}
}
catch (Exception)
{ }
}
public static void UpdateCookie(string cookie_name, string cookie_value)
{
HttpCookie cookie = HttpContext.Current.Request.Cookies.Get(cookie_name);
if (cookie == null)
{
HttpCookie cookie1 = new HttpCookie(cookie_name, cookie_value);
System.Web.HttpContext.Current.Response.Cookies.Add(cookie1);
}
else
{
cookie.Value = cookie_value;
HttpContext.Current.Request.Cookies.Set(cookie);
}
}
post_params: {
"ASPSESSID": "<%=Session.SessionID %>",
}
