2008-11-20 12 views
107

Gibt es eine HTMLHelper für den Datei-Upload? Insbesondere suche ich nach einem Ersatz vonHTML-Helfer für <input type = "file" />

<input type="file"/> 

mit ASP.NET MVC HTMLHelper.

Oder Wenn ich

using (Html.BeginForm()) 

Was ist das HTML-Steuerelement für die Datei hochladen?

Antwort

181

HTML hochladen ASP MVC

Modell 3. Datei : () Beachten Sie, dass FileExtensionsAttribute in MvcFutures verfügbar ist Überprüfen Sie die Dateierweiterungen clientseitig und serverseitig.)

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

HTML-Ansicht:

@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) 
} 

Controller-Aktion:

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

Dies macht keine Dateieingabe '', nur ein Textfeld – Ben

+0

Ben, versuchen Sie http://jsfiddle.net/, um die Dateieingabe zu rendern. –

+0

@PauliusZaliaduonis mit der Zeile Microsoft.Web.Mvc.FileExtensions der MVC ist als rot unterstrichen. Wie repariere ich das? – Pomster

2

BeginForm nutzen zu können, ist hier die Art und Weise, es zu benutzen:

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

Zuerst erwähnen Sie, wie Sie ein Eingabeelement generieren, und jetzt sprechen Sie darüber, wie ein Formularelement generiert wird? Ist das wirklich deine Antwort? – Pablo

+0

Sie haben Recht; Ich habe gerade meine Antwort bearbeitet. – Graviton

+0

http://stackoverflow.com/questions/216600/html-beginform-and-adding-properties –

18

können Sie auch:

@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> 
} 
+1

und der Controller sieht aus wie ....? – JsonStatham

4

Verbesserte Version von Paulius Zaliaduonis' Antwort:

In Um die Validierung Arbeit richtig zu machen hatte ich das Modell zu ändern:

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; 
      } 
     } 
} 

und die Aussicht auf:

@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) 
} 

Dies ist erforderlich, weil das, was über nur @Serj Sagan schrieb mit Streichern Fileextension Attribute Arbeits .

+0

Können Sie diese Antwort nicht in Paulius 'Antwort einfügen? – Graviton

-1

Dies ist ein wenig hacky ich denke, aber es ergibt sich die korrekte Validierung usw. Attribute

@Html.Raw(Html.TextBoxFor(m => m.File).ToHtmlString().Replace("type=\"text\"", "type=\"file\"")) 
0

angewendet wird Das funktioniert auch:

Modell:

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

Ansicht:

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

Controller-Aktion:

[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; 
      } 

List of contentTypes

3

Oder Sie es richtig tun könnten:

In Ihrer Htmlhelper Erweiterungsklasse:

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)); 
    } 

Diese Zeile:

Erzeugt eine ID einzigartig für das Modell, Sie wissen in Listen und Zeug. Modell [0] .Name usw.

Erstellen Sie die richtige Eigenschaft im Modell:

public HttpPostedFileBase NewFile { get; set; } 

Dann müssen Sie sicherstellen, dass Ihre Formulardateien senden:

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

hier Dann wird Ihr Helfer :

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