帶參數的文件上傳方法&后台接收

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的值。