您的位置：首页 > 编程语言 > ASP

asp.net mvc 、 ajax 批量上传文件

2015-12-28 16:27 381 查看

<!DOCTYPE html>
<html>
<head>
<title>多文件上传</title>
</head>
<body>
<div>
<form id="files-form" action="#" method="POST" enctype="multipart/form-data">
@*生成防伪标记*@
@Html.AntiForgeryToken()
<input type="file" id="files" name="files" multiple="multiple">
<input type="submit" value="上传" />
<div id="content"></div>
</form>
</div>
<script src="~/Content/Scripts/Lib/jquery-1.10.2.min.js"></script>

<script>
var inputElement = document.getElementById("files");
inputElement.addEventListener("change", handleFiles, false);

function handleFiles() {
var fileList = this.files;
var dd = document.getElementById('content');
for (var i = 0 ; i < fileList.length ; i++) {
dd.innerHTML += fileList[i].name + "<br>";
}
}
$(document).ready(function () {
$("#files-form").submit(function () {
//获取防伪标记
var token = $('input[name=__RequestVerificationToken]').val();
var headers = {};
headers["__RequestVerificationToken"] = token;

var fileObj = document.getElementById("files").files;
var params = new FormData();
for (var i = 0; i < fileObj.length; i++) {
params.append("file" + i, fileObj[i]);
}
$.ajax({
type: "POST",
url: "UploadFiles",
data: params,
contentType: false,//必须false才会自动加上正确的Content-Type
processData: false,//必须false才会避开jQuery对 formdata 的默认处理 ，XMLHttpRequest会对 formdata 进行正确的处理
headers: headers,
success:function(result) {
alert(result.msg);
},
error: function () {
alert("Error");
}
});
return false;
});
});
</script>
</body>
</html>

Controller

//处理文件上传
[HttpPost]
[ExtendedValidateAntiForgeryToken]
public ActionResult UploadFiles(HttpPostedFileBase f)
{
if (!Request.IsAjaxRequest())
return View();
try
{
var files = Request.Files;
if(files.Count==0)
return Json(GetResult(false, "提示：没有要上传的文件！", null));

var i = 1;
foreach (string file in files)
{
//获取文件信息
var curFile = Request.Files[file];
if (curFile != null && curFile.ContentLength < 1)
continue;
//获取保存路径
var filesUrl = Server.MapPath("~/Upload");
if (Directory.Exists(filesUrl) == false)//路径不存在则创建
Directory.CreateDirectory(filesUrl);
if (curFile == null)
continue;
//获取文件名
var fileName = Path.GetFileName(curFile.FileName);
if (fileName == null)
continue;
//文件后缀名
var filePostfixName = fileName.Substring(fileName.LastIndexOf('.'));
//新文件名
var newFileName = (DateTime.Now.ToString("yyyyMMddHHmmss") + i) + filePostfixName;
i++;
//
var path = Path.Combine(filesUrl, newFileName);
//保存文件
curFile.SaveAs(path);
}
return Json(GetResult(true, "上传成功！", null));
}
catch (Exception ex)
{
return Json(GetResult(false, "上传失败、错误信息：" + ex.Message, null));
}
}
/// <summary>
/// 获取结果集
/// </summary>
/// <param name="rel">状态</param>
/// <param name="msg">提示信息</param>
/// <param name="data">数据集</param>
/// <returns></returns>
public static object GetResult(bool rel, string msg, object data)
{
return new Dictionary<string, object> { { "rel", rel }, { "msg", msg }, { "obj", data } };
}

#region 防止CSRF攻击特性
/// <summary>
/// 防止CSRF攻击特性
/// </summary>
public class ExtendedValidateAntiForgeryToken : AuthorizeAttribute
{
public override void OnAuthorization(AuthorizationContext filterContext)
{
var request = filterContext.HttpContext.Request;
if (request.HttpMethod != WebRequestMethods.Http.Post) return;
if (request.IsAjaxRequest())
{
var antiForgeryCookie = request.Cookies[AntiForgeryConfig.CookieName];
var cookieValue = antiForgeryCookie != null ? antiForgeryCookie.Value : null;
//从cookies 和 Headers 中 验证防伪标记
//这里可以加try-catch
AntiForgery.Validate(cookieValue, request.Headers["__RequestVerificationToken"]);
}
else
{
new ValidateAntiForgeryTokenAttribute().OnAuthorization(filterContext);
}
}
}
#endregion

效果图片：

Demo 下载地址 http://yunpan.cn/cuFmakwtJUFBT 访问密码 1eda

有疑问的可以给我留言哦。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航