Miles MS.HelloWorld

單檔上傳功能

要使用HttpPostedFileBase來接檔案的資料

public ActionResult SingleFileUpload(HttpPostedFileBase file)
{
    if (file != null)
    {
        if (file.ContentLength > 0)
        {
            //取檔名
            string fileName = Path.GetFileName(file.FileName);
            //組路徑
            string path = Path.Combine(Server.MapPath("~/Files/"), fileName);

            //將檔案存到指定路徑
            file.SaveAs(path);

            //成功訊息
            ViewBag.UploadedMessage = fileName + " 檔案上傳成功";
        }
    }
    return View();
}

<div>
    @*
        參數一:Action
        參數二:Controller
        參數三:Post方式送資料
        參數四:當表單元素有 <input type="file"> 設定 multipart/form-data，才可以檔案上傳
    *@
    @using (Html.BeginForm("SingleFileUpload", "FileUpload", FormMethod.Post, new { enctype = "multipart/form-data" }))
    {
        <input type="file" name="file" />
        <br />
        <input type="submit" value="檔案上傳" />
    }
</div>
<div>
    @if (ViewBag.UploadedMessage != null)
    {
        <p style="color:green">
            @ViewBag.UploadedMessage
        </p>
    }
</div>

 

多個檔案上傳功能

改由使用IEnumerable<HttpPostedFileBase>來接資料，action的code大同小異

public ActionResult MutiFileUpload(IEnumerable<HttpPostedFileBase> files)
{
    if (files != null)
    {
        foreach (var file in files)
        {
            bool isCanUpload = file != null && file.ContentLength > 0;

            if (isCanUpload)
            {
                //取檔名
                string fileName = Path.GetFileName(file.FileName);
                //組路徑
                string path = Path.Combine(Server.MapPath("~/Files/"), fileName);

                //將檔案存到指定路徑
                file.SaveAs(path);

                //成功訊息
                ViewBag.UploadedMessage = "檔案上傳成功";
            }
        }
    }
    
    return View();
}

view的部分，使用jquery append新的檔案上傳按鈕，且每個檔案上傳按鈕都可以有移除的動作

<div>
    @*
        參數一:Action
        參數二:Controller
        參數三:Post方式送資料
        參數四:當表單元素有 <input type="file"> 設定 multipart/form-data，才可以檔案上傳
    *@
    @using (Html.BeginForm("MutiFileUpload", "FileUpload", FormMethod.Post, new { enctype = "multipart/form-data" }))
    {
        <div id="UploadLoadDiv">
            <p>
                <input type="file" name="files" />
            </p>                
        </div>
        <div>
            <input type="button" id="AddUploadFile" value="增加檔案上傳" />
        </div>
        
        <input type="submit" value="檔案上傳" />
    }
</div>
<div>
    @if (ViewBag.UploadedMessage != null)
    {
        <p style="color:green">
            @ViewBag.UploadedMessage
        </p>
    }
</div>
<script>
    $(document).ready(function () {
        var appendUploadId = 1;
        $("#AddUploadFile").click(function () {
            var fileId = "file" + appendUploadId;

            // 動態新增檔案上傳按鈕 + 動態新增移除按鈕
            $("#UploadLoadDiv").append(
                "<p id='" + fileId + "'><input type='file' name='files'/>" 
                + "<input type='button' value='移除' onclick=RemoveUpload('" + fileId + "')> </p> "                                            
                                        );                                
            appendUploadId++;
        });
    });

    function RemoveUpload(fileId) {
        $('#' + fileId).remove();
    }
</script>

多個檔案上傳功能-plus

還有另一個多檔案上傳最快的方法，只要將<input> 多寫一個multiple就可以了，如下

<input type="file" name="file" multiple/>

 

 

 

一天一分享，身體好健康。

該追究的不是過去的原因，而是現在的目的。