how multiple file upload in jquery ajax submit?

Hello all,

I am working on MVC 5, I want to save image on server from input type file uploader.

Form submit,

secondForm: function (e) {
ar idfileTitle = document.getElementById("idfileTitle"); /*This fileuploader Id*/
var idfileLogo = document.getElementById("idfileLogo"); /*This fileuploader Id*/
var json = {};
var hidvalue = $('#hdPrimUserFirstReg').val(); /*This is the hiddenfield Id*/
var hidJson = JSON.parse(hidvalue);
$.each($('#frmSubmitPremUserRegFirst').serializeArray(), function (i, field) {
json[field.name] = field.value || '';
});
hidJson.Form2 = json;
$formData = new FormData();
if (idfileTitle.files.length > 0) {
for (var i = 0; i < idfileTitle.files.length; i++) {
$formData.append('file-' + i, idfileTitle.files[i]);
}
}
if (idfileLogo.files.length > 0) {
for (var i = 0; i < idfileLogo.files.length; i++) {
$formData.append('file-' + i, idfileLogo.files[i]);
}
}
/*Here 'hidJson' containing all form data*/
$.ajax({
url: '../UserRegister/PremiumUserRegistration/' + hidJson,
type: 'POST',
data: $formData,
dataType: 'json',
contentType: false,
processData: false,
success: function ($data) {
$('#frmregitems').html($data);
}
});

Controller,

Here pageVM is null passing while assigning hidJson to PremiumUserRegistration action method as param.

Here, Request.Files also containing only one image details, How can get multiple images from Request.Files ?

Please help me...

Hi Abhilash,

Try this Code,

var formdata = new FormData();
var count = 0;
function UploadVTQIAttachments() {
Var idfileTitle = document.getElementById("idfileTitle"); /*This fileuploader Id*/
var idfileLogo = document.getElementById("idfileLogo"); /*This fileuploader Id*/
if (idfileTitle.files.length > 0) {
for (var i = 0; i < idfileTitle.files.length; i++) {
formData.append('file-' + i, idfileTitle.files[i]);
}
}
if (idfileTitle.files.length > 0) {
for (var i = 0; i < idfileTitle.files.length; i++) {
formData.append('file-' + i, idfileTitle.files[i]);
}
}
$.ajax({
url: '@Url.Action("PremiumUserRegistration","UserRegister")'+ hidJson,
type: 'POST',
data: formData,
contentType: false,
processData: false,
success: function (data) {
$('#frmregitems').html(data);
}
});
}

1 Reply

Know the answer? Post it — somebody with the same question will find it here.