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

最新推荐文章于 2023-02-20 11:10:28 发布

JinFan_Zheng

最新推荐文章于 2023-02-20 11:10:28 发布

阅读量4.3k

点赞数

本文链接：https://blog.csdn.net/u011587956/article/details/50419831

版权

asp.net mvc 同时被 3 个专栏收录

3 篇文章 0 订阅

订阅专栏

Ajax

3 篇文章 0 订阅

订阅专栏

Jquery

3 篇文章 0 订阅

订阅专栏

<!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

效果图片：