ตัวช่วย HTML สำหรับ <input type =“ file” />


124

มีHTMLHelperไฟล์สำหรับอัพโหลดหรือไม่? โดยเฉพาะฉันกำลังมองหาการแทนที่ของ

<input type="file"/>

โดยใช้ ASP.NET MVC HTMLHelper

หรือถ้าฉันใช้

using (Html.BeginForm()) 

การควบคุม HTML สำหรับการอัปโหลดไฟล์คืออะไร?

คำตอบ:


207

ไฟล์อัปโหลด HTML ASP MVC 3.

Model : ( โปรดทราบว่า FileExtensionsAttribute มีอยู่ใน MvcFutures ซึ่งจะตรวจสอบความถูกต้องของนามสกุลไฟล์ฝั่งไคลเอ็นต์และฝั่งเซิร์ฟเวอร์ )

public class ViewModel
{
    [Required, Microsoft.Web.Mvc.FileExtensions(Extensions = "csv", 
             ErrorMessage = "Specify a CSV file. (Comma-separated values)")]
    public HttpPostedFileBase File { get; set; }
}

มุมมอง HTML :

@using (Html.BeginForm("Action", "Controller", FormMethod.Post, new 
                                       { enctype = "multipart/form-data" }))
{
    @Html.TextBoxFor(m => m.File, new { type = "file" })
    @Html.ValidationMessageFor(m => m.File)
}

การกระทำของตัวควบคุม :

[HttpPost]
public ActionResult Action(ViewModel model)
{
    if (ModelState.IsValid)
    {
        // Use your file here
        using (MemoryStream memoryStream = new MemoryStream())
        {
            model.File.InputStream.CopyTo(memoryStream);
        }
    }
}

สิ่งนี้ไม่ได้แสดงการป้อนไฟล์<input type="file" />แต่เป็นกล่องข้อความ
Ben

@PauliusZaliaduonis กับไลน์ Microsoft.Web.Mvc.FileExtensions MVC จะขีดเส้นใต้เป็นสีแดง ฉันจะแก้ไขได้อย่างไร
Pomster

1
@pommy โปรดทราบว่า FileExtensionsAttribute มีอยู่ใน MvcFutures (ณ MVC3) คุณสามารถใช้แหล่งที่มาจากที่นี่: Sources หรือมีอยู่ใน. NET Framework 4.5 ดูเอกสาร MSDN
Paulius Zaliaduonis

1
น่าเสียดายที่แอตทริบิวต์ FileExtension ดูเหมือนจะไม่ทำงานกับคุณสมบัติประเภท HttpPostedFileBase แต่ดูเหมือนว่าจะเป็นสตริงเท่านั้น อย่างน้อยก็ไม่ยอมรับ pdf เป็นส่วนขยายที่ถูกต้อง
Serj Sagan

สิ่งนี้จะเพิ่มแอตทริบิวต์ค่า (value = "") ซึ่งไม่ได้ตรวจสอบว่าเป็น HTML5 ที่ถูกต้อง ค่าไม่ถูกต้องกับไฟล์และรูปภาพประเภทอินพุต ฉันไม่เห็นวิธีใดในการลบแอตทริบิวต์ค่า ดูเหมือนว่าจะเป็นรหัสยาก
Dan Friedman

19

คุณยังสามารถใช้:

@using (Html.BeginForm("Upload", "File", FormMethod.Post, new { enctype = "multipart/form-data" }))
{ 
    <p>
        <input type="file" id="fileUpload" name="fileUpload" size="23" />
    </p>
    <p>
        <input type="submit" value="Upload file" /></p> 
}

8

ฉันมีคำถามเดียวกันนี้อยู่ครู่หนึ่งและพบหนึ่งในโพสต์ของ Scott Hanselman:

การใช้งานการอัปโหลดไฟล์ HTTP ด้วย ASP.NET MVC รวมถึงการทดสอบและการจำลอง

หวังว่านี่จะช่วยได้


ขอบคุณ แต่ฉันกำลังมองหาการใช้งานโดยเฉพาะ (Html. BeginForm ()) ไม่ใช่ตัวแปรอื่น ๆ
Graviton

6

หรือคุณสามารถทำได้อย่างถูกต้อง:

ในคลาส HtmlHelper Extension ของคุณ:

public static MvcHtmlString FileFor<TModel, TProperty>(this HtmlHelper<TModel> helper, Expression<Func<TModel, TProperty>> expression)
    {
        return helper.FileFor(expression, null);
    }

public static MvcHtmlString FileFor<TModel, TProperty>(this HtmlHelper<TModel> helper, Expression<Func<TModel, TProperty>> expression, object htmlAttributes)
    {
        var builder = new TagBuilder("input");

        var id = helper.ViewContext.ViewData.TemplateInfo.GetFullHtmlFieldName(ExpressionHelper.GetExpressionText(expression));
        builder.GenerateId(id);
        builder.MergeAttribute("name", id);
        builder.MergeAttribute("type", "file");

        builder.MergeAttributes(new RouteValueDictionary(htmlAttributes));

        // Render tag
        return MvcHtmlString.Create(builder.ToString(TagRenderMode.SelfClosing));
    }

บรรทัดนี้:

var id = helper.ViewContext.ViewData.TemplateInfo.GetFullHtmlFieldName(ExpressionHelper.GetExpressionText(expression));

สร้างรหัสเฉพาะสำหรับรุ่นที่คุณรู้จักในรายการและสิ่งต่างๆ model [0] .Name ฯลฯ

สร้างคุณสมบัติที่ถูกต้องในแบบจำลอง:

public HttpPostedFileBase NewFile { get; set; }

จากนั้นคุณต้องแน่ใจว่าแบบฟอร์มของคุณจะส่งไฟล์:

@using (Html.BeginForm("Action", "Controller", FormMethod.Post, new { enctype = "multipart/form-data" }))

นี่คือตัวช่วยของคุณ:

@Html.FileFor(x => x.NewFile)

วิธีแก้ปัญหานี้เป็นอาหารตามากกว่าและช่วยให้ฉันสอดคล้องกับวิธีการของตัวช่วย @Html
Yahfoufi

4

คำตอบของ Paulius Zaliaduonis รุ่นปรับปรุง:

เพื่อให้การตรวจสอบความถูกต้องฉันต้องเปลี่ยน Model เป็น:

public class ViewModel
{
      public HttpPostedFileBase File { get; set; }

        [Required(ErrorMessage="A header image is required"), FileExtensions(ErrorMessage = "Please upload an image file.")]
        public string FileName
        {
            get
            {
                if (File != null)
                    return File.FileName;
                else
                    return String.Empty;
            }
        }
}

และมุมมองต่อ:

@using (Html.BeginForm("Action", "Controller", FormMethod.Post, new 
                                       { enctype = "multipart/form-data" }))
{
    @Html.TextBoxFor(m => m.File, new { type = "file" })
    @Html.ValidationMessageFor(m => m.FileName)
}

สิ่งนี้จำเป็นเนื่องจากสิ่งที่ @Serj Sagan เขียนเกี่ยวกับแอตทริบิวต์ FileExtension ที่ทำงานกับสตริงเท่านั้น


คุณไม่สามารถรวมคำตอบนี้เป็นคำตอบของ Paulius ได้หรือไม่?
Graviton

2

วิธีใช้BeginFormนี่คือวิธีใช้:

 using(Html.BeginForm("uploadfiles", 
"home", FormMethod.POST, new Dictionary<string, object>(){{"type", "file"}})

2
ก่อนอื่นคุณพูดถึงวิธีการสร้างองค์ประกอบอินพุตและตอนนี้คุณพูดถึงวิธีสร้างองค์ประกอบแบบฟอร์ม? นี่คือคำตอบของคุณจริงๆหรือ?
pupeno

0

สิ่งนี้ยังใช้งานได้:

รุ่น:

public class ViewModel
{         
    public HttpPostedFileBase File{ get; set; }
}

ดู:

@using (Html.BeginForm("Action", "Controller", FormMethod.Post, new 
                                       { enctype = "multipart/form-data" }))
{
    @Html.TextBoxFor(m => m.File, new { type = "file" })       
}

การกระทำของตัวควบคุม:

[HttpPost]
public ActionResult Action(ViewModel model)
{
    if (ModelState.IsValid)
    {
        var postedFile = Request.Files["File"];

       // now you can get and validate the file type:
        var isFileSupported= IsFileSupported(postedFile);

    }
}

public bool IsFileSupported(HttpPostedFileBase file)
            {
                var isSupported = false;

                switch (file.ContentType)
                {

                    case ("image/gif"):
                        isSupported = true;
                        break;

                    case ("image/jpeg"):
                        isSupported = true;
                        break;

                    case ("image/png"):
                        isSupported = true;
                        break;


                    case ("audio/mp3"):  
                        isSupported = true;
                        break;

                    case ("audio/wav"):  
                        isSupported = true;
                        break;                                 
                }

                return isSupported;
            }

รายการ contentTypes


-2

นี่เป็นเรื่องแฮ็กเล็กน้อยที่ฉันเดา แต่ส่งผลให้มีการใช้แอตทริบิวต์การตรวจสอบความถูกต้อง ฯลฯ

@Html.Raw(Html.TextBoxFor(m => m.File).ToHtmlString().Replace("type=\"text\"", "type=\"file\""))
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.