带参数的文件上传方法&后台接收

1，html代码

利用input的multiple属性来上传多个文件，需要注意的是选择文件时，需要一次性选择多个文件，一次一次选择是达不到多文件上传的效果。

<script src="~/Scripts/jquery-3.1.1.min.js"></script>
<link href="~/Content/Semantic-UI-CSS/semantic.min.css" rel="stylesheet" />
<script src="~/Content/Semantic-UI-CSS/semantic.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<div class="container">
    <input type="file" multiple hidden id="files" />
    <br />
    <button class="ui violet button" id="add">添加文件 </button>
    <button class="ui primary button" id="upload">上传 </button>
    <button class="ui button" id="reset">重置 </button>
    <div class="ui ordered list"></div>
</div>
<script type="text/javascript">
　　//添加文件
    $("#add").click(function () {
        $("#files").click();
    });
　　//重置文件选择
    $("#reset").click(function () {
        $("#files").val('');
        $("div.list").html('');
    });
　　//上传
    $("#upload").click(function () {
        let form = new FormData();
        let files = $("#files").get(0).files;
        if ($("#files").val() != "") {
            for (let i = 0; i < files.length; i++) {
                form.append("file["+i+"]",files[i]);
            }
            form.append("p1", "杨家有女初长成");
            form.append("p2", "养在深闺人未识");
            axios.post('/test/uploadfile', form)
                .then(function (response) {
                    console.log(response.data)
                 })
                .catch(function (error) {
                    console.log(error)
                });
        }
    });
　　//显示选择的文件
    $("#files").change(function () {        
        let files = $("#files").get(0).files;
        let item = "";
        for (let i = 0; i < files.length; i++) {
            item += "<div class=\"item\">" + files[i].name + "</div>";
        }
        $("div.list").html(item);
    });
</script>
<style type="text/css">
    .container {
        margin-left: 1em;
    }
</style>

 

效果图：

2，后台接收

[HttpPost]
 public ActionResult UploadFile()
 {
     HttpRequest request = System.Web.HttpContext.Current.Request;
     string parameter1 = request.Params.Get("p1");
     string parameter2 = request.Params.Get("p2");
     StringBuilder builder = new StringBuilder();
     if (request.Files.Count > 0)
     {
        try
        {
            foreach (string file in request.Files)
            {
               var postedFile = request.Files[file];
               var filePath = System.Web.HttpContext.Current.Server.MapPath("~/Files/");
               if (!Directory.Exists(filePath))
               {
                   Directory.CreateDirectory(filePath);
                }
                postedFile.SaveAs(filePath + postedFile.FileName);
              }
              builder.Append("参数1：" + parameter1 + "， 参数2：" + parameter2);
         }
         catch (Exception ex)
         {
             builder.Append("error:" + ex.Message);
         }
    }
    return Json(builder.ToString());
}

 最终效果图：

 3，上传文件大小限制解决办法

默认上传文件大小不能超过4MB，超出会上传失败。

解决方法也很简单，在webconfig的system.web节点添加如下代码

<httpRuntime targetFramework="4.5" maxRequestLength="10240" />

这里设置最大长度为10M，根据自己的需求修改maxRequestLength的值。