MVC5 Ajax.BeginForm formulaire de téléchargement avec des fichiers

Question

J'ai lu certains articles qui ne sont pas possible d'enregistrer des fichiers en utilisant Ajax.BeginForm.

J'ai un formulaire dans MVC5 qui utilise Ajax.BeginForm de sorte que l'utilisateur a une belle application sensible sans actualisation de la page.

Maintenant, l'exigence est d'ajouter 4 champs qui contiendront des fichiers (téléchargement de fichiers).

Également lu que peut-être avec jquery.form.js c'est possible.

Donc, mes questions sont sur d'autres approche est ce de sens:

1. Le formulaire garder le Ajax.BeginForm
2. L'utilisateur saisit les données dans le formulaire.
3. Lorsque l'utilisateur doit charger un fichier dans le formulaire, alors je pensais télécharger ce fichier sur le serveur à la volée et y stocker temporairement.
   4. Lorsque le formulaire est enregistré, côté serveur, je peux obtenir des fichiers temporaires, puis les enregistrer.

Est-ce un sens? Appréciez tout conseil de personnes déjà confrontées à cette situation.

Answer 1

S'il vous plaît vérifier ci-dessous pour le code de sauvegarde séparé Formulaire de données et File Upload:

Voir avec Ajax.BeginForm

@using (Ajax.BeginForm("", "", new AjaxOptions 
 
{ 
 
    HttpMethod = "POST", 
 
}, new { @id = "UploadFileForm", @class = "form-horizontal" })) 
 
{ 
 
<div class="col-sm-3"> 
 
      <label>Browse</label> 
 
      <input type="file" id="file" name="file" /> 
 
      <p class="help-block">Supported format .doc,.docx,.pdf</p> 
 
     </div> 
 
     <div class="col-xs-12"> 
 
      <button type="button" value="Add" id="Addbtn" class="btn btn-primary"> 
 
       <i class="fa fa-plus-square"></i>&nbsp;Add 
 
      </button> 
 
     </div> 
 
     }

File Upload CLICK événement :

$("#Addbtn").click(function() { 
 
      // --- code for upload resume 
 
      var formdata = new FormData(); 
 
      var getfile = document.getElementById('file'); 
 
      for (i = 0; i < getfile.files.length ; i++) { 
 
       formdata.append(getfile.files[i].name, getfile.files[i]); 
 
      } 
 
      function isvalidFileFormat() { 
 
       if (getfile.files.length > 0) { 
 
        var extention = $('#file').val().split('.'); 
 
        var data; 
 
        $.each(extention, function (index, value) { 
 
         if (index == 1) { 
 
          data = value; 
 
         } 
 
        }); 
 

 
        if (data == "pdf" || data == "docx" || data == "doc") { 
 
         return ""; 
 
        } 
 
        else { 
 
return "<p>Please choose .pdf, .docx, .doc file only." + "</p>\n"; 
 
        } 
 
       } 
 
       else 
 
        return ""; 
 
       } 
 
      } 
 
      if (summary) { CustomAlert(summary); return false; } else { 
 
       var TestModel = { 
 
        "Id": $("#hdnId").val() 
 
       }; 
 
       $.ajax(
 
       { 
 
       //Save Main Form Data 
 
        url: '/TestController/TestAction/', 
 
        type: "Post", 
 
        async: false, 
 
        dataType: "json", 
 
        data: JSON.stringify(TestModel), 
 
        contentType: "application/json;charset=utf-8", 
 
        success: function (result) { 
 
        // After saving main data you can save this file for same user 
 
         formdata.append("Userid", result.id); 
 
         $.ajax({ 
 
          url: '/TestController/Fileupload', 
 
          data: formdata, 
 
          contentType: false, 
 
          processData: false, 
 
          async: false, 
 
          type: 'POST', 
 
          success: function (data) { 
 
           $("#YourDivName").html(data); 
 
          } 
 
         }); 
 
         $("#file").val(null); 
 
        } 
 
       }); 
 
       return true; 
 
      } 
 
     });

Voici le code pour le fichier télécharger

/// <summary> 
 
     ///File Upload 
 
     /// </summary> 
 
     /// <param name="Userid"></param> 
 
     /// <returns></returns> 
 
     [HttpPost] 
 
     public ActionResult Fileupload(int Userid = 0) 
 
     { 
 
      string path = string.Empty; 
 
      string filename = string.Empty; 
 
      string fileExtention = string.Empty; 
 
      string withoutEXT = string.Empty; 
 
      string ResumeFilePath = string.Empty; 
 
      string ChangeFileName = string.Empty; 
 
      bool uploadStatus = false; 
 
      if (Request.Files != null && Request.Files.Count > 0) 
 
      { 
 

 
       for (int i = 0; i < Request.Files.Count; i++) 
 
       { 
 
        HttpPostedFileBase file = Request.Files[i]; 
 
        if (file.ContentType == "application/pdf" || file.ContentType == "text/rtf" || file.ContentType == "application/doc" 
 
         || file.ContentType == "application/vnd.openxmlformats-officedocument.wordprocessingml.document") 
 
        { 
 
         filename = Path.GetFileNameWithoutExtension(file.FileName); 
 
         fileExtention = Path.GetExtension(file.FileName); 
 
         withoutEXT = fileExtention.Replace(".", ""); 
 

 
         ChangeFileName = filename + "_" + locationid + fileExtention; 
 

 
         var ifExistPath = "/Uploads/Files/" + ChangeFileName; 
 
         var FileVirtualPath = System.IO.Path.Combine(Server.MapPath("/Uploads/Files/"), ChangeFileName); 
 
         path = Path.Combine(Server.MapPath("~/Uploads/Files/"), ChangeFileName); 
 

 
         //delete file 
 
         
 
         if (System.IO.File.Exists(path)) 
 
         { 
 
          System.IO.File.Delete(path); 
 
         } 
 
         if (ifExistPath != FileVirtualPath) 
 
         { 
 
          file.SaveAs(path); 
 
          uploadStatus = true; 
 
         } 
 
         else 
 
         { 
 
         } 
 
        } 
 
        else 
 
        { 
 
         ModelState.AddModelError("", "Please upload a PDF or Doc or rtf File"); 
 
         // return View("", model); 
 
        } 
 
        if (uploadStatus && path != string.Empty) 
 
        { 
 

 
         ResumeFilePath = "/Uploads/Files/"; 
 
        //Add code for save this file in database here 
 
        } 
 
       } 
 
      } 
 
      return PartialView("Test", objMaster); 
 
     }

Espérons que cela vous aidera !!

Answer 2

Vous ne pouvez pas utiliser l'assistant MVC Ajax avec le téléchargement de fichiers. Au lieu de cela, vous pouvez utiliser le jquery form plugin, sur un Html.BeginForm() normal.

Exemple:

<form id="myForm" url="/Home/Upload" method="post" enctype="multipart/form-data"> 
    <label>File</label> 
    <input name="file" type="file" /> 
</form> 

<script> 
    function bindAjaxForm(selector, onComplete, beforeSerialize) { 
     var form = $(selector); 
     $.validator.unobtrusive.parse(selector); 
     form.data("validator").settings.submitHandler = function (frm) { 
      $(frm).ajaxSubmit({ 
       beforeSerialize: function ($form, options) { 
        if (typeof (beforeSerialize) === "function") { 
         beforeSerialize($form, options); 
        } 
       }, 
       complete: function (response, statusText) { 
        if (typeof onComplete === "function") { 
         onComplete(response, statusText); 
        } 
       } 
      }); 
     } 
    }; 

    bindAjaxForm("#myForm", function(data, status) { 
     alert("complete"); 
     console.log(arguments); 
    }); 
</script> 

Vous utilisez les callbacks onComplete et beforeSerialize pour gérer la réponse.

onComplete est appelée après que l'AJAX est terminé, et si vous console.log ses arguments, vous verrez qu'elle contient la réponse AJAX (json/html).

Essayez quelque chose comme ceci:

bindAjaxForm("#myForm", function(data, status) { 
    $("#container").html(data); 
}); 

Answer 3

Ajouter ce

$("body").on("submit", "#frmAddProduct", function (e) { 
      var form = e.target; 
      if (form.dataset.ajax) { 
       e.preventDefault(); 
       e.stopImmediatePropagation(); 
       var xhr = new XMLHttpRequest(); 
       xhr.open(form.method, form.action); 
       xhr.onreadystatechange = function() { 
        if (xhr.readyState == 4 && xhr.status == 200) { 
         if (form.dataset.ajaxUpdate) { 
          var updateTarget = document.querySelector(form.dataset.ajaxUpdate); 
         } 
        } 
       }; 
       if ($("#frmAddProduct").valid()) { xhr.send(new FormData(form)); } 
      } return true; 
     });