HttpPostedfileBase имеет значение null, используя jQuery Ajax

У меня проблема с загрузкой файла в Asp.net Mvc. Прежде всего, я должен использовать Ajax для передачи значения загружаемого файла.

В javascript у меня есть модель, которую я заполняю, когда я проверяю ее с помощью отладчика, правильно заполняет объект, но когда я отправляю эту модель на сервер (контроллер)

Значение httpPostedfileBase всегда равно null.

Я ищу его в google, в каком-то посте я увидел, что я не могу использовать загрузчик файлов с Ajax, но в другом я видел, что могу.

Но я не могу исправить свой код.

Есть мой Javascript Code.

$(document).ready(function () {

$('#btnUploadFile').on('click', function () {
   var data= new FormData();

    debugger;
    var files = $("#fileUpload").get(0).files;

    if (files.length > 0) {
        data.append("UploadedImage", files[0]);
    }
    var ResturantSharingViewModel =
   {
       Type: $("#SharingTargetType").val(),
       SharingTitle: $("#SharingTitle").val(),
       content: $("#Content").val(),
       ItemId : $("#ItemId").val(),
       Photos: files[0]
   };
    $.ajax({
        type: 'POST',
        dataType: 'json',
        contentType: 'application/json',
        url: '<%= Url.Action("SaveOneDatabase")%>',
        data: JSON.stringify(ResturantSharingViewModel),
          success: function (result) {
              var rs = result;
          },
          error: function () {
              alert("Error loading data! Please try again.");
          }
      });

Мой контроллер public virtual bool SaveOneDatabase(ResturantSharingViewModel result) Моя модель ResturantSharingViewModel View Model

 public class ResturantSharingViewModel
{
    public Guid SharingPremiumHistoryID { get; set; }
    public string SharingTitle { get; set; }
    public string Content { get; set; }
    public DateTime AddedDate { get; set; }
    public bool IsSubmit { get; set; }
    public DateTime SubmitedDate { get; set; }
    public IEnumerable<SelectListItem> SharingTypes { get; set; }
    public IEnumerable<SelectListItem> SharingTargetType { get; set; }
    public short Type { get; set; }
    public Guid ItemId { get; set; }
    public HttpPostedFileBase[] Photos { get; set; }
}

My Html Elements

    <form enctype="multipart/form-data">
    <article>
    <%--<% =Html.BeginForm("Add","PremiumSharing") %>--%>
   <hgroup class="radiogroup">
    <h1>ارسال خبر</h1>
    <%= Html.HiddenFor(model => model.SharingPremiumHistoryID) %>
    <%= Html.HiddenFor(model => model.ItemId) %>
    <div class="group">
        <span> ارسال به </span>
        <%= Html.DropDownListFor(model => model.SharingTargetType, Model.SharingTypes) %>
    </div>
</hgroup>
<div class="newseditor">
    <div class="input-form">
        <%= Html.LabelFor(model => model.SharingTitle, "عنوان خبر") %>
        <%= Html.TextBoxFor(model => model.SharingTitle) %>
    </div>

    <div class="input-form">
        <%= Html.LabelFor(model => model.Content, "متن خبر") %>
        <%= Html.TextAreaFor(model => model.Content) %>
    </div>
    <div><input id="fileUpload" type="file" />

    </div>
    <% if (ViewBag.IsInEditMode != null && !(bool)ViewBag.IsInEditMode)
       {%>
    <div class="input-form">
        <%= Html.CheckBox("SendToInTheCity") %> ارسال در بخش «در شهر» فیدیلیو
    </div>
    <%} %>

    <div class="input-submit">
        <button name="post" id="btnUploadFile"  onclick="uploadFile()" >ارسال خبر</button>
    </div>
    <br />
</div>

Ответ 1

Во-первых, можно загрузить с помощью Ajax, важно то, что вам нужно установить <form enctype="multipart/form-data"></form> в форму, чтобы сообщить, что ваша форма имеет вход для загрузки файла. Затем вам нужно принять HttpPostedFileBase в качестве входного параметра в действии вашего контроллера.

Попробуйте это. Пример кода загрузки jquery. (В основном из Как я могу загружать файлы асинхронно?)

function uploadFile(uploadId) {
    var formData = new FormData($('form')[0]);

    $.ajax({
        url: '<%= Url.Action("SaveOneDatabase")%>',
        type: 'Post',
        beforeSend: function(){},
        success: function(result){

        },
        xhr: function() {  // Custom XMLHttpRequest
        var myXhr = $.ajaxSettings.xhr();
            if(myXhr.upload) { // Check if upload property exists
                // Progress code if you want
            }
            return myXhr;
        },
        error: function(){},
        data: formData,
        cache: false,
        contentType: false,
        processData: false
    });
}

HTML-форма нуждается в этом атрибуте. Смотрите это сообщение, зачем оно вам нужно → Что означает enctype = 'multipart/form-data'?

enctype="multipart/form-data"

С#

[HttpPost]
public ActionResult SaveOneDatabase(HttpPostedFileBase file)
{
}

Ответ 2

Вид:

<script/>
var add_photo_url = "@Url.Action("AddPhoto", "Gallery")"; 
    var model = new FormData();    
    var i=0;//selected file index 
    model.append("File", files[i]);
    model.append("Name", "test");
    $.ajax({// and other parameter is set here 
        url: add_photo_url,
            type: "POST",
            data: model,
            dataType: "json",
            cache: false,
            contentType: false,
            processData: false

        })
        .always(function (result) { 
        });
</script>

Показать модель:

public class PhotoAlbumViewModel {
    public  string Name { get; set; }
    public HttpPostedFileBase File { get; set; }
}

Контроллер:

public JsonResult AddPhoto(PhotoAlbumViewModel model) {
    // var result =...
    // and set your result; 
    return Json(result, JsonRequestBehavior.AllowGet);
}

Ответ 3

Я изменил ответ @a moradi.

JS:

//FormData:
//Treat it like a normal form but with "multipart/form-data" encoding type.
//Inside it works on same XMLHttpRequest.send() method.    
var model = new FormData();
model.append("File", $('#file')[0].files[0]);
model.append("Name", "Name");
$.ajax({ 
        url: someUrl,
        type: "POST",
        data: model,
        //contentType: 
        //Sets the ContentType in header.
        //The default contentType is "application/x-www-form-urlencoded; charset=UTF-8". But this will prevent us sending AntiForgeryToken to service/controller.
        //To prevent this contentType is set to false.
        contentType: false,
        //processData:
        //To prevent data in data option getting converted to string format, 'processData' option is set to false.
        processData: false,
        success = function (m) {...}
        error = function (m) {...}
    });

Показать модель:

public class PhotoAlbumViewModel {
    public  string Name { get; set; }
    public HttpPostedFileBase File { get; set; }
}

Контроллер:

public JsonResult AddPhoto(PhotoAlbumViewModel model) {
    ...
}

Refrence:

Повторите следующие ссылки: FormData, JQuery, ContentType