Jak przesłać tablicę zdjęć przez ajax do kontrolera MVC

0

Cześć. W ramach nauki ASP.NET MVC i jQuery napotkałem problem, którego jak do tej pory nie udało mi się rozwiązać. Mianowicie nie potrafię przesłać tablicy zdjęć przez ajax do kontrolera MVC. Zdjęcia wybierane są przez <input type="file" id="car-img-input" name="images" onchange="onImagePick(event)" multiple="multiple"/> a następnie zapisywane do owej tablicy, która wraz z viewmodelem ma być przesyłana do kontrolera. Problem polega na tym że zmienna IEnumberable<HttpPostedFileBase>images w momencie przesłania danych przyjmuje albo wartość null albo jej zawartość jest równa zero.
Czyli jak dla mnie, kontroler nie może zmapować danych które otrzymuje i stąd ilość elementów images jest równa zero. Jeżeli moje rozumowanie jest poprawne to w jaki sposób powinienem przekazywać zdjęcia do kontrolera ? No a jeśli nie jest poprawne, to co robię źle i w jakim kierunku powinienem pójść ?

Tak wygląda kontroler:

        [Authorize]
        [HttpPost]
        public ActionResult CreateCarListing(CarListingViewModel viewModel, IEnumerable<HttpPostedFileBase> images)
        { 
         //tworzenie obiektów, zapisywanie zdjęć etc.
        }

Widok na którym wybieram zdjęcia.

<div class="photo-car-input vsbot2" id="photo-car-input">
<input type="file" id="car-img-input" name="images"  onchange="onImagePick(event)" multiple="multiple" /> //Wybieranie zdjęć
         <div class="create-listing vstop6">
<button  class="btn btn-primary add-listing-button" type="submit" onclick="uploadImages()">Add Listing</button> //Wysłanie zapytania
         </div>
  <div>

Zapisywanie zdjęć i ajax call:

<script language="javascript" type="text/javascript">
        
        var userImages = new Array();
        
        function onImagePick(event) {

            for (var i = 0; i <= event.target.files.length; i++) {
                if (typeof (event.target.files[i]) === 'object' && event.target.files[i].type.match(/^image/)) {
                    tempImageArray.push(event.target.files[i]);
                    
                }
            }
        }


        function uploadImages() {
            var images = new Array();
            images = userImages;
            var url = "/CarListing/CreateCarListing/";

            $.ajax({
                type: "POST",
                url: url,
                data: { 'images': images },
                traditional: true,
                success: function (data) {
                    console.log(data);
                    alert(data);
                },
                error: function (data) {
                    alert("Error: " + data.responseText);
                },
            });
        }


0

w funkcji onImagePick pushujesz obrazki do tempImageArray, a w uploadImages używasz userImages.

Tak czy owak jako POST musisz wysłać cały obiekt formularza, a nie tylko dane obrazków. tu przykład:
https://stackoverflow.com/a/19296001

0
Slepiec napisał(a):

w funkcji onImagePick pushujesz obrazki do tempImageArray, a w uploadImages używasz userImages.

Tak czy owak jako POST musisz wysłać cały obiekt formularza, a nie tylko dane obrazków. tu przykład:
https://stackoverflow.com/a/19296001

Dzieki za zwrócenie uwagi odośnie tablic, ale niestety dalej nie potrafię nic przesłać do kontrolera. Jeśli dobrze zrozumiałem twoją wypowiedz i zawartość linka to dane które chce przesłać do kontrolera muszą być przesłane w postaci formData wraz z elementem które je wysyła. Jeśli tak co dalej robie nie tak że ilość elementów w zmiennej IEnumerable<HttpPostedFileBase> listOfImages jest równa zeru ? :(

  @using (@Html.BeginForm("CreateCarListing", "CarListing", FormMethod.Post, new { @enctype = "multipart/form-data",id="createListing" }))
{
        <input type="file" id="car-img-input" name="images" multiple />
        <button id="foo" class="btn btn-primary add-listing-button" type="submit">Add Listing</button>
}

            $('#foo').click(function() {
                var fileData = document.getElementsByName("images");
                var length = fileData["0"].files.length;
                var formData = new FormData();
                var file;

                for (var i = 0; i < length; i++) {
                    file = fileData["0"].files[i];
                    formData.append("images", file);
                }
                for (var value of formData.values()) {
                    console.log(value);
                }
                var url = "/CarListing/CreateCarListing/";

                $.ajax({
                    type: "POST",
                    url: url,
                    data: { 'listOfImages': formData },
                    traditional: true,
                    success: function (data) {
                        console.log(data);
                        alert(data);
                    },
                    error: function (data) {
                        alert("Error: " + data.responseText);
                    },
                });
            });
[Authorize]
        [HttpPost]
        public ActionResult CreateCarListing(CarListingViewModel viewModel, IEnumerable<HttpPostedFileBase> listOfImages)
        { 
         //tworzenie obiektów, zapisywanie zdjęć etc.
        }
1

Ajax-em jako takim nie wyslesz zdjec (ani zadnych plikow) - jest to jakies tam zabezpieczenie. Musisz to zrobic w standardowy sposob "submitujac" form - no ale mozesz to zrobic js tak ze bedzie wygladac jak ajax.

1 użytkowników online, w tym zalogowanych: 0, gości: 1