Как передать файл изображения и данные формы из Ajax в контроллер MVC - PullRequest
Новая
       71

Как передать файл изображения и данные формы из Ajax в контроллер MVC

2 голосов
/ 12 октября 2019

У меня есть форма с изображением и другими полями, я хочу отправить данные с изображением в контроллер. 

  <form id="first-form"  method="post" enctype="multipart/form-data">
   <div class="row">
      <div class="col-md-9">
       <div class="row">
        <div class="col-sm-6 form-group">
         @Html.Label(@RegisterResource.Name, new { @class = "control-label" })
         <div class="field-input">
         @Html.TextBox("Name", null, new { placeholder = @RegisterResource.Name, autofocus = "autofocus", @class = "input-text" })
         @Html.ValidationMessage("Name", null, new { @class = "text-danger" })
        </div>
       </div>
      <div class="col-sm-6 form-group">
        @Html.Label(@RegisterResource.Family, new { @class = "control-label" })
         <div class="field-input">
         @Html.TextBox("Family", null, new { placeholder = @RegisterResource.Family, @class = "input-text" })
         @Html.ValidationMessage("Family", null, new { @class = "text-danger" })
        </div>
       </div>
       </div>
       <div class="row">
        <div class="col-sm-6 form-group">
          @Html.Label(@RegisterResource.CellPhone, new { @class = "control-label" })
           <div class="field-input">
           @Html.TextBox("CellPhone", null, new { placeholder = @RegisterResource.CellPhone, maxlength = 11, @class = "input-text", onkeydown = "return ValidateNumber(event);" })
            @Html.ValidationMessage("CellPhone", null, new { @class = "text-danger" })
           </div>
          </div>
          <div class="col-sm-6 form-group">
            @Html.Label(@ContractorResource.City, new { @class = "control-label" })
          <div class="field-input">
            @Html.DropDownList("CityId", (SelectList)ViewBag.City, new { placeholder = @ContractorResource.City, @class = "input-text" })
            @Html.ValidationMessage("CityId", null, new { @class = "text-danger" })
          </div>
         </div>
        </div>
        </div>
        <div class="col-md-3 text-center">
          <img id="image_upload_preview" class="img-circle" src="~/Content/Images/contractor-avator.png" />
          <br />
          <input type="file" id="inputFile" style="max-width: 200px" />
          <label for="inputFile" class="btn-2">انتخاب فایل تصویر</label>
         </div>
         </div>
         <div class="order-complate text-center">
         <button type="submit" class="awe-btn awe-btn-1 awe-btn-medium" id="user-register-btn" data-loading-text="<i class='fa fa-spinner fa-spin '></i> @PageResource.ConfirmCode">@PageResource.Continues</button>
         </div>
    </form>

и в jquery 

function readURL(input) {
 if (input.files && input.files[0]) {
   var reader = new FileReader();
   reader.onload = function(e) {
     $('#image_upload_preview').attr('src', e.target.result);
 }

 reader.readAsDataURL(input.files[0]);
 fileImage = input.files[0];
     }
}

$("#inputFile").change(function() {
  readURL(this);
});

submitHandler: function() {
  $("#user-register-btn").button('loading');
  var data = $('#first-form').serialize();
  var formData = new FormData();  
  formdata.append("img", fileImage );             
  $.post("/Contractor/SendConfirmCode",
   data,
    function(result) {
     } 
    else {
     }
   },
  "json");

Но в контроллере Request.FilesEmpty.

Ответы [ 2 ]

2 голосов
/ 12 октября 2019

Вам необходим скрипт изменения для загрузки изображения.

В этом примере, когда вы выбираете файл, используя упоминание элемента управления файлом «inputFile», происходит событие изменения файла jquery.

Просмотр кода для одного файла 

 <div class="col-md-3 text-center">
      <img id="image_upload_preview" class="img-circle" src="~/Content/Images/contractor-avator.png" />
      <br />
      <input type="file" id="inputFile" style="max-width: 200px" />
      <label for="inputFile" class="btn-2">انتخاب فایل تصویر</label>
     </div>

Просмотр кода для выбора нескольких файлов 

<div class="col-md-3 text-center">
          <img id="image_upload_preview" class="img-circle" src="~/Content/Images/contractor-avator.png" />
          <br />
          <input multiple="" type="file" id="inputFile" style="max-width: 200px" />
          <label for="inputFile" class="btn-2">انتخاب فایل تصویر</label>
         </div>

Код изменения файла Jquery в этом примере, еслиВы хотите выбрать несколько файлов или один файл 

/*FILE UPLOAD HERE*/
    var alldata = []
    $('#inputFile').change(function () {
        try {
            var formData = new FormData();
            var totalFiles = document.getElementById('inputFile').files.length;
            for (var i = 0; i < totalFiles; i++) {
                var file = document.getElementById('inputFile').files[i];
                formData.append("oHttpPostedFileBase", file);
            }
            $.ajax({
                type: "POST",
                url: '/Contractor/SendConfirmCode',
                data: formData,
                dataType: 'json',
                contentType: false,
                processData: false,
                success: function (response) {
                    if (response != null) {
                        console.log(response);      
                      $('#image_upload_preview').attr('src', response[0].FilePath);                 
                    }
                    else {
                        alert('No Response...!');
                    }
                },
                error: function (error) {
                    alert("error");
                }
            });
        } catch (e) {
            alert("File Upload Error" + e.message);
        }
    });

Добавить этот код в файл контроллера с этим классом 

#region FileUpload handling
        /*File Upload*/
        [HttpPost]
        public ActionResult BaseAutoFileUpload(HttpPostedFileBase[] oHttpPostedFileBase)
        {
            try
            {            
                List<FileUploadClass> lstUploadFile = new List<FileUploadClass>();          
                string yourfilepathfolder = "~/Uploads/Junk/";
                for (int i = 0; i < Request.Files.Count; i++)
                {
                    FileUploadClass oFileUploadClass = new FileUploadClass();
                    var file = Request.Files[i];
                    var fileName = Path.GetFileName(file.FileName);
                    fileName = Guid.NewGuid().ToString() + "_" + fileName;
                    var path = Path.Combine(Server.MapPath(yourfilepathfolder), fileName);
                    file.SaveAs(path);
                    oFileUploadClass.FileName = fileName.Substring(37);
                    oFileUploadClass.FileNameForDelete = fileName;
                    oFileUploadClass.FilePath = path;
                    lstUploadFile.Add(oFileUploadClass);
                }
                return Json(lstUploadFile);
            }
            catch (Exception ex)
            {               
                return Json(null);
            }
        }
        public class FileUploadClass
        {
            public string FileName { get; set; }
            public string FilePath { get; set; }
            public string FileNameForDelete { get; set; }
        }
        #endregion

Примечание: при выбореfile ваш файл автоматически сохраняется на сервере с указанным конкретным путем в "yourfilepathfolder".

, если у вас есть выбор одного файла, и вы не будете показывать файл, файл которого вы выбрали

, просто добавьте эту строку вкод 

$('#image_upload_preview').attr('src', response[0].FilePath);

Я уже добавил эту строку для вас, пожалуйста, проверьте.

консоль регистрации

1 голос
/ 12 октября 2019

Спасибо @ jishan за исчерпывающий ответ;

На вашем месте я бы предпочел модель представления для публикации данных формы, однако

в соответствии с вашим видом: 

    $('#user-register-btn').click(function (e) {

        e.preventDefault();

        $("#user-register-btn").button('loading');


        //var data = $('#first-form').serialize();
        var data = {
            Name: $('#Name').val(),
            Family: $('#Family').val(),
            CityId: $('#CityId').val(),
            CellPhone: $('#CellPhone').val()
        };


        var formData = new FormData();

        formData.append("data", JSON.stringify(data));


        var totalFiles = document.getElementById('inputFile').files.length;
        for (var i = 0; i < totalFiles; i++) {
            var file = document.getElementById('inputFile').files[i];
            formData.append("httpPostedFileBase", file);
        }
        $.ajax({
            type: "POST",

            // same as @jishan's answer
        });

    });

и в вашем контроллере : 

    [HttpPost]
    public ActionResult SendConfirmCode(HttpPostedFileBase[] httpPostedFileBase, string data)
    {
        if(Request.Files.Count > 0)
        {
            // as you wish
        }


        ModelForm formData = JsonConvert.DeserializeObject<ModelForm>(data);
        // save formData to DB or ...

        return View();
    }

и класс модели соответствует данным формы: 

public class ModelForm
{
    public string Name { get; set; }
    public string Family { get; set; }
    public string CityId { get; set; }
    public string CellPhone { get; set; }
}
...