Ajax.BeginForm ne fonctionne pas comme prévu

Question

J'ai un problème très étrange avec Aajx.BeginForm. J'ai ce code:

Vu:

@using (Ajax.BeginForm("Upload", "Profile", new AjaxOptions() { HttpMethod = "POST" }, new { enctype = "multipart/form-data" })) 
    { 
     @Html.AntiForgeryToken() 
     <input type="file" name="files"><br> 
     <input type="submit" value="Upload File to Server"> 
    } 

Contrôleur:

[HttpPost] 
[ValidateAntiForgeryToken] 
public void Upload(IEnumerable<HttpPostedFileBase> files) 
{ 
    if (files != null) 
    { 
     foreach (var file in files) 
     { 
      // Verify that the user selected a file 
      if (file != null && file.ContentLength > 0) 
      { 
       // extract only the fielname 
       var fileName = Path.GetFileName(file.FileName); 
       // TODO: need to define destination 
       var path = Path.Combine(Server.MapPath("~/Upload"), fileName); 
       file.SaveAs(path); 
      } 
     } 
    } 
} 

Le problème est que je reçois fichier vide lorsque le formulaire est soumis. J'ai lu beaucoup de questions qui sont les mêmes de ma question, mais la plupart des réponses étaient que le nom d'entrée type = "fichier" n'est pas comme le même nom de paramètre dans le contrôleur. J'ai trouvé quelques exemples, j'essaie this one qui est presque la même chose de mon code, sauf pour les fichiers jquery, alors j'ai essayé de remplacer les fichiers jquery avec ces fichiers:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script> 
<script src="http://malsup.github.com/jquery.form.js"></script> 

Et est la surprise ici !!. Lorsque le formulaire est soumis, j'obtiens le fichier mais le formulaire est post-retour. C'est du travail car il n'y a pas d'ajax. Je recherche dans google pour Ajax.BeginFrom qui est post retour et trouvé de nombreuses solutions dans stackoverflow et la plupart des réponses était que jquery.unobtrusive-ajax fichier doit être inclus dans la page. C'est comme un cercle de problèmes, une fois que vous en avez résolu un, vous en obtenez un autre. Est-ce que je manque quelque chose?

Answer 1

Vous ne pouvez pas soumettre de fichiers avec Ajax.BeginForm(). L'assistant utilise le fichier jquery.unobtrusive-ajax.js pour soumettre les données à l'aide des fonctions ajax qui n'autorisent pas multipart/form-data enctype.

Une option consiste à utiliser FormData (mais non pris en charge dans les anciens navigateurs). Modifiez le Ajax.BeginForm() à Html.BeginForm() puis gérer les formulaires soumettre événement

$('form').submit(function() { 
    var formdata = new FormData($('form').get(0)); 
    $.ajax({ 
    url: '@Url.Action("YourActionName", "YourControllerName")', 
    type: 'POST', 
    data: formdata, 
    processData: false, 
    contentType: false, 
    success: function() { 
     .... // do something? 
    }  
    }); 
}); 

En outre, il existe de nombreux plugins jquery que vous pouvez utiliser pour télécharger des fichiers (14 d'entre eux sont énumérés ci-here)

Side note: Votre dossier l'entrée permet la sélection d'un seul fichier, votre paramètre de méthode doit donc être HttpPostedFileBase files (et non IEnumerable<HttpPostedFileBase> files) ou inclure l'attribut multiple dans l'entrée de fichier.

Answer 2

Vous devez spécifier le type de codage dans votre formulaire.

@using (Ajax.BeginForm("Upload", "ControllerName", new AjaxOptions { HttpMethod = "POST"}, new { enctype = "multipart/form-data"})) 
    { 
     @Html.AntiForgeryToken() 
     <input type="file" name="files"><br> 
     <input type="submit" value="Upload File to Server"> 
    }