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