今天會介紹如何在MVC中上傳檔案到本機端，在前端畫面中顯示出上傳路徑，以及檔案類型的上傳卡控，這邊卡控的對象為Excel檔案(.xls/.xlsx)

Controller

1. 首先先在Controller中建立一個具有HttpPost的Action，引數為接收前端view的file傳送過來的檔案，if判斷副檔名是否為Excel檔案(.xls/.xlsx)，"[UploadPath]"這個參數要到Web.config中多新增一個上傳檔案路徑位置，檔案名稱則更改為抓取當天的日期，在儲存到相對應的路徑，最後再利用ViewBag將路徑傳送到前端顯示
   
   

[HttpPost]
public ActionResult Uploads(HttpPostedFileBase file)
{
    //判斷是否有上傳檔案
    if (Request.Files["file"].ContentLength > 0)
    {
        string extension = System.IO.Path.GetExtension(file.FileName);
             string fileSavedPath =  WebConfigurationManager.AppSettings["UploadPath"];

        //判斷是否為excel檔
        if (extension == ".xls" || extension == ".xlsx")
        {
            //更改檔名為當天日期時間
            string newFileName = string.Concat(
            DateTime.Now.ToString("yyyy-MM-dd HH-mm-ss"),
            Path.GetExtension(file.FileName).ToLower());
            fullFilePath = Path.Combine(Server.MapPath(fileSavedPath),  newFileName);

            // 存放檔案到伺服器上
            Request.Files["file"].SaveAs(fullFilePath);
   
            //將資料傳送到前端顯示
            ViewBag.path = fullFilePath;
            Response.Write("<script language=javascript>alert(' 檔案上傳成功 ');</" +
            "script>");
         }
         else
         {
            Response.Write("<script language=javascript>alert('請上傳 .xls  或 .xlsx 格式的檔 
            案');</" + "script>");
         }
    }
    else
    {
        Response.Write("<script language=javascript>alert('請選擇檔案');</"  + "script>");
    }

    return View("ExcelImport");
}

View

1. 前端View這邊跟前幾天有介紹到的Form表單POST傳輸一樣，所以這邊就不在多做介紹，有興趣的朋友可以看(https://ithelp.ithome.com.tw/articles/10215364) 的介紹，html的部分先新增一個input的file來選擇本地檔案(檔案送往後端Aciton的引數)，新增一個span，加入ViewBag.path由後端送往前端的路徑名稱顯示
   

<!--點選上傳檔案按鈕後POST到後端的Uploads的Action-->
@using (Html.BeginForm("Uploads", "Excel", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    <div class="uploads">
        <input type="file" id="upload_file" name="file" />
        <button type="submit" id="upload_button" class="btn btn-primary">上傳檔案</button>
    </div>
}

<div class="remote_file_path">
    <label class="remote_file_path_label ">Remote File Path:</label>
    <span class="form-control" id="remote_file_path">@ViewBag.path</span>
</div>

2. 接著開啟網頁點擊選擇檔案，就會出現瀏覽資料本機的彈跳視窗
   
   

3. 選擇好Excel檔案後點擊上傳檔案後，將會出現檔案上傳成功的彈跳視窗且也會顯示檔案的上傳路徑
   
   

4. 最後到路徑中的資料夾將會看到多新增了一筆Excel檔案上來，完成檔案上傳的功能