Dans cet article nous allons voir comment uploader un ou plusieurs fichiers avec ASP.Net MVC3.

Cas pour uploader un fichier

Modèle

Notre modèle contiendra un nom et un fichier.

?View Code CSHARP
    public class FileUplaodModel
    {
        [Required]
        [Display(Name = "User name")]
        public string UserName { get; set; }
 
        [Required]
        [Display(Name = "File")]
        public HttpPostedFileBase File { get; set; }
    }

Contrôleur

Le contrôleur récupérera le fichier et l’enregistrera dans le répertoire /App_Data/Uploads de l’application.

Dans notre test, on ne traitera pas volontairement le Nom de l’utilisateur.

?View Code CSHARP
        public ActionResult Upload()
        {
            return View();
        }
 
        [HttpPost]
        public ActionResult Upload(FileUplaodModel fileUploadModel)
        {
            if (fileUploadModel.File.ContentLength > 0)
            {
                var fileName = Path.GetFileName(fileUploadModel.File.FileName);
                if (!String.IsNullOrEmpty(fileName)) 
                { 
                    var path = Path.Combine(Server.MapPath("~/App_Data/Uploads"), fileName);
                    fileUploadModel.File.SaveAs(path);
                }
            }
 
            return RedirectToAction("Upload");
        }

Vue

Et pour finir notre vue.

Afin de pouvoir uploader des fichiers, le formulaire doit utiliser multipart/form-data comme type d’encryption.

De plus en laissant les paramètres action et controller de BeginForm à null, la validation du formulaire aura le même effet que BeginForm().

?View Code RAZOR
@using (Html.BeginForm(null, null, FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    @Html.ValidationSummary(true)
    <fieldset>
        <legend>FileUplaodModel</legend>
 
        <div class="editor-label">
            @Html.LabelFor(model => model.UserName)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.UserName)
            @Html.ValidationMessageFor(model => model.UserName)
        </div>
        <div class="editor-field">
            @Html.LabelFor(model => model.Files)
            @Html.TextBoxFor(model => model.Files, new { type = "file" })<br />
        </div>
        <p>
            <input type="submit" value="Create" />
        </p>
    </fieldset>
}

Cas pour uploader plusieurs fichiers

Modèle

Le modèle ne contiendra plus un fichier mais une liste de fichiers.

?View Code CSHARP
        [Display(Name = "Files")]
        public IEnumerable<HttpPostedFileBase> Files { get; set; }

Contrôleur

Le Contrôleur gérera une liste de fichiers.

?View Code CSHARP
        [HttpPost]
        public ActionResult Upload(FileUplaodModel fileUploadModel)
        {
            foreach(HttpPostedFileBase file in fileUploadModel.Files)
            {
                if (file.ContentLength > 0)
                {
                    var fileName = Path.GetFileName(file.FileName);
                    if (!String.IsNullOrEmpty(fileName)) 
                    { 
                        var path = Path.Combine(Server.MapPath("~/App_Data/Uploads"), fileName);
                        file.SaveAs(path);
                    }
                }
            }
 
            return RedirectToAction("Upload");
        }

Conclusion

Dans cet article, on aura vu comment uploader un ou plusieurs fichiers avec ASP.Net MV3

Partagez l'article: