MVC5 Ajax.BeginForm загрузить форму с файлами

Question

Я прочитал некоторые статьи, которые невозможно сохранить файлы, используя Ajax.BeginForm.

У меня есть форма в MVC5, которая использует Ajax.BeginForm, поэтому у пользователя есть приятное отзывчивое приложение без обновления страницы.

Теперь необходимо добавить 4 поля, в которых будут храниться файлы (загрузка файлов).

Также читайте, что возможно с jquery.form.js это возможно.

Так что мои вопросы о другом подходе это сделать какой-либо смысл:

1. Форма держать Ajax.BeginForm
2. Пользователь вводит данные в форму.
3. Когда пользователю нужно загрузить файл в форму, я подумал о том, чтобы загрузить этот файл на сервер «на лету» и временно сохранить его.
   4. Когда форма сохраняется, на стороне сервера я могу получить временные файлы, а затем сохранить их.

Есть ли в этом смысл? Цените любые советы от людей, которые уже сталкиваются с этой ситуацией.

Answer 1

Пожалуйста, проверьте ниже код для сохранения отдельной формы данных и Файл Загрузить:

Вид с 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> 
 
     }

загрузки файлов Кнопка Нажмите событий :

$("#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; 
 
      } 
 
     });

Вот код файла загрузить

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

Надеется, что это поможет вам !!

Answer 2

Вы не можете использовать помощник MVC Ajax с загрузкой файлов. Вместо этого вы можете использовать jquery form plugin, на нормальном Html.BeginForm().

Пример:

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

Вы используете onComplete и beforeSerialize обратных вызовов для обработки ответа.

onComplete вызывается после выполнения AJAX, и если вы его аргументы, вы увидите, что он содержит ответ AJAX (json/html).

попробовать что-то вроде этого:

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

Answer 3

Добавить это

$("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; 
     });