การอัปโหลดไฟล์ MVC 3 และการผูกโมเดล


91

ฉันมีการอัปโหลดแบบฟอร์มที่ใช้งานได้ แต่ฉันต้องการส่งข้อมูลโมเดลสำหรับฐานข้อมูลของฉันเพื่อบันทึกไฟล์ด้วยชื่ออื่นแน่นอน

นี่คือมุมมองมีดโกนของฉัน:

@model CertispecWeb.Models.Container

@{
  ViewBag.Title = "AddDocuments";
}

<h2>AddDocuments</h2>

@Model.ContainerNo

@using (Html.BeginForm("Uploadfile", "Containers", FormMethod.Post, 
            new { enctype = "multipart/form-data" }))
{
    <input type='file' name='file' id='file' />
    <input type="submit" value="submit" />
}

นี่คือคอนโทรลเลอร์ของฉัน:

[HttpPost]
public ActionResult Uploadfile(Container containers, HttpPostedFileBase file)
{
     if (file.ContentLength > 0)
     {
        var fileName = Path.GetFileName(file.FileName);
        var path = Path.Combine(Server.MapPath("~/App_Data/Uploads"),
                       containers.ContainerNo);
        file.SaveAs(path);
     }

     return RedirectToAction("Index");
}

ข้อมูลโมเดลจะไม่ถูกส่งผ่านไปยังคอนโทรลเลอร์ ฉันได้อ่านแล้วว่าฉันอาจต้องอัปเดตโมเดลฉันจะทำอย่างไร


2
อ้างถึงstackoverflow.com/questions/9411563/…สำหรับปัญหาที่เกี่ยวข้อง
LCJ

คำตอบ:


123

แบบฟอร์มของคุณไม่มีแท็กอินพุตใด ๆ นอกเหนือจากไฟล์ดังนั้นในการดำเนินการของคอนโทรลเลอร์คุณไม่สามารถคาดหวังว่าจะได้รับสิ่งอื่นใดนอกจากไฟล์ที่อัปโหลด (นั่นคือทั้งหมดที่ส่งไปยังเซิร์ฟเวอร์) วิธีหนึ่งในการบรรลุเป้าหมายนี้คือการรวมแท็กที่ซ่อนไว้ซึ่งมี id ของโมเดลซึ่งจะช่วยให้คุณสามารถดึงข้อมูลจากที่เก็บข้อมูลของคุณภายในการดำเนินการของคอนโทรลเลอร์ที่คุณกำลังโพสต์ไป (ใช้สิ่งนี้หากผู้ใช้ไม่ควรแก้ไขโมเดล แต่ เพียงแค่แนบไฟล์):

@using (Html.BeginForm("Uploadfile", "Containers", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    @Html.HiddenFor(x => x.Id)
    <input type="file" name="file" id="file" />
    <input type="submit" value="submit" />
}

จากนั้นในการดำเนินการควบคุมของคุณ:

[HttpPost]
public ActionResult Uploadfile(int id, HttpPostedFileBase file)
{
    Containers containers = Repository.GetContainers(id);
    ...
}

ในทางกลับกันหากคุณต้องการอนุญาตให้ผู้ใช้แก้ไขโมเดลนี้คุณจะต้องรวมฟิลด์อินพุตที่เหมาะสมสำหรับแต่ละฟิลด์ของโมเดลของคุณที่คุณต้องการส่งไปยังเซิร์ฟเวอร์:

@using (Html.BeginForm("Uploadfile", "Containers", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    @Html.TextBoxFor(x => x.Prop1)
    @Html.TextBoxFor(x => x.Prop2)
    @Html.TextBoxFor(x => x.Prop3)
    <input type="file" name="file" id="file" />
    <input type="submit" value="submit" />
}

จากนั้นคุณจะมีตัวยึดโมเดลเริ่มต้นสร้างโมเดลนี้ขึ้นมาใหม่จากคำขอ:

[HttpPost]
public ActionResult Uploadfile(Container containers, HttpPostedFileBase file)
{
    ...
}

1
ฉันได้รับfileเป็นnullและRequest.Files.Countเป็น 0 เช่นกันจะมีความแตกต่างหรือไม่ถ้าformเป็นAjaxFormและมีrouteValuesเช่นกัน
bjan

8

แก้ไขแล้ว

รุ่น

public class Book
{
public string Title {get;set;}
public string Author {get;set;}
}

ตัวควบคุม

public class BookController : Controller
{
     [HttpPost]
     public ActionResult Create(Book model, IEnumerable<HttpPostedFileBase> fileUpload)
     {
         throw new NotImplementedException();
     }
}

และดู

@using (Html.BeginForm("Create", "Book", FormMethod.Post, new { enctype = "multipart/form-data" }))
{      
     @Html.EditorFor(m => m)

     <input type="file" name="fileUpload[0]" /><br />      
     <input type="file" name="fileUpload[1]" /><br />      
     <input type="file" name="fileUpload[2]" /><br />      

     <input type="submit" name="Submit" id="SubmitMultiply" value="Upload" />
}

ชื่อหมายเหตุของพารามิเตอร์จากการกระทำของคอนโทรลเลอร์ต้องตรงกับชื่อขององค์ประกอบอินพุต IEnumerable<HttpPostedFileBase> fileUpload->name="fileUpload[0]"

fileUpload ต้องตรงกัน


2
โซลูชันนี้เป็นโซลูชันเดียวที่ฉันพบสำหรับไฟล์หลายไฟล์ ขอบคุณสำหรับการแบ่งปันรหัสของคุณ
จัน Gh.

6

หากคุณไม่มีภาพที่โพสต์ถึงการกระทำของคุณอยู่เสมอคุณสามารถทำสิ่งนี้ได้:

[HttpPost]
public ActionResult Uploadfile(Container container, HttpPostedFileBase file) 
{
    //do container stuff

    if (Request.Files != null)
    {
        foreach (string requestFile in Request.Files)
        {
            HttpPostedFileBase file = Request.Files[requestFile]; 
            if (file.ContentLength > 0)
            {
                string fileName = Path.GetFileName(file.FileName);
                string directory = Server.MapPath("~/App_Data/uploads/");
                if (!Directory.Exists(directory))
                {
                    Directory.CreateDirectory(directory);
                }
                string path = Path.Combine(directory, fileName);
                file.SaveAs(path);
            }
        }
    }

} 

1

สำหรับไฟล์หลายไฟล์ สังเกตแอตทริบิวต์ " multiple " ที่ใหม่กว่าสำหรับอินพุต:

แบบฟอร์ม:

@using (Html.BeginForm("FileImport","Import",FormMethod.Post, new {enctype = "multipart/form-data"}))
{
    <label for="files">Filename:</label>
    <input type="file" name="files" multiple="true" id="files" />
    <input type="submit"  />
}

ตัวควบคุม:

[HttpPost]
public ActionResult FileImport(IEnumerable<HttpPostedFileBase> files)
{
    return View();
}

1

ครั้งแรกดาวน์โหลดไฟล์ jquery.form.js จากด้านล่าง url

http://plugins.jquery.com/form/

เขียนโค้ดด้านล่างใน cshtml

@using (Html.BeginForm("Upload", "Home", FormMethod.Post, new { enctype = "multipart/form-data", id = "frmTemplateUpload" }))
{
    <div id="uploadTemplate">

        <input type="text" value="Asif" id="txtname" name="txtName" />


        <div id="dvAddTemplate">
            Add Template
            <br />
            <input type="file" name="file" id="file" tabindex="2" />
            <br />
            <input type="submit" value="Submit" />
            <input type="button" id="btnAttachFileCancel" tabindex="3" value="Cancel" />
        </div>

        <div id="TemplateTree" style="overflow-x: auto;"></div>
    </div>

    <div id="progressBarDiv" style="display: none;">
        <img id="loading-image" src="~/Images/progress-loader.gif" />
    </div>

}


<script type="text/javascript">

    $(document).ready(function () {
        debugger;
        alert('sample');
        var status = $('#status');
        $('#frmTemplateUpload').ajaxForm({
            beforeSend: function () {
                if ($("#file").val() != "") {
                    //$("#uploadTemplate").hide();
                    $("#btnAction").hide();
                    $("#progressBarDiv").show();
                    //progress_run_id = setInterval(progress, 300);
                }
                status.empty();
            },
            success: function () {
                showTemplateManager();
            },
            complete: function (xhr) {
                if ($("#file").val() != "") {
                    var millisecondsToWait = 500;
                    setTimeout(function () {
                        //clearInterval(progress_run_id);
                        $("#uploadTemplate").show();
                        $("#btnAction").show();
                        $("#progressBarDiv").hide();
                    }, millisecondsToWait);
                }
                status.html(xhr.responseText);
            }
        });

    });


</script>

วิธีการดำเนินการ: -

 public ActionResult Index()
        {
            ViewBag.Message = "Modify this template to jump-start your ASP.NET MVC application.";

            return View();
        }

 public void Upload(HttpPostedFileBase file, string txtname )
        {

            try
            {
                string attachmentFilePath = file.FileName;
                string fileName = attachmentFilePath.Substring(attachmentFilePath.LastIndexOf("\\") + 1);

           }
            catch (Exception ex)
            {

            }
        }
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.