how to upload multple files through partialview with ajax js

hi,

can you have tell me, how to upload multiple files in partial view page using MVC4 with ajax call. am tring to multple files upload with partial view in view page. in that time, i click the submit button through ajax js call its going to controller perfectly. but in that controller its always shows REQUEST.FILES '0' files. but iam trying to fix the solution till not geting the files in REQUEST.FILES

how to fix the solution any one give me the solution.

Thanks,

Bharath kumar peggem

Please try below code:

HTML

Javascript

$('#txtUploadFile').on('change', function (e) {

var files = e.target.files;

if (files.length > 0) {

if (window.FormData !== undefined) {

var data = new FormData();

for (var x = 0; x < files.length; x++){

data.append("file" + x, files[x]);

}

$.ajax({

type: "POST",

url: '/MyController/UploadFile',

contentType: false,

processData: false,

data: data,

success: function(result) {

error: function (xhr, status, p3, p4){

var err = "Error " + " " + status + " " + p3 + " " + p4;

}

});

} else {

alert("This browser doesn't support HTML5 file uploads!");

}

});

C# Controler code

[HttpPost]

public ActionResult UploadFile()

{

foreach (string file in Request.Files)

{

var fileContent = Request.Files[file];

if (fileContent != null && fileContent.ContentLength > 0)

{

// get a stream

var stream = fileContent.InputStream;

var fileName = Path.GetFileName(file);

var path = Path.Combine(Server.MapPath("~/App_Data/Images"), fileName);

using (var fileStream = File.Create(path))

{

stream.CopyTo(fileStream);

}

1 Reply

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

Manas Mohapatra11y ago
Accepted answer
Please try below code:

HTML
<input type="file" id="txtUploadFile" name="img" multiple>
Javascript
$('#txtUploadFile').on('change', function (e) {
   var files = e.target.files;
      if (files.length > 0) {
         if (window.FormData !== undefined) {
            var data = new FormData();
            for (var x = 0; x < files.length; x++){
               data.append("file" + x, files[x]);
            }
      $.ajax({
         type: "POST",
         url: '/MyController/UploadFile',
         contentType: false,
         processData: false,
         data: data,
         success: function(result) {
         },
         error: function (xhr, status, p3, p4){
            var err = "Error " + " " + status + " " + p3 + " " + p4;
         }
      });
      } else {
      alert("This browser doesn't support HTML5 file uploads!");
      }
   }
});

C# Controler code

[HttpPost]
public ActionResult UploadFile()
{

   foreach (string file in Request.Files)
   {
      var fileContent = Request.Files[file];
      if (fileContent != null && fileContent.ContentLength > 0)
      {
         // get a stream
         var stream = fileContent.InputStream;
         var fileName = Path.GetFileName(file);
         var path = Path.Combine(Server.MapPath("~/App_Data/Images"), fileName);
         using (var fileStream = File.Create(path))
         {
               stream.CopyTo(fileStream);
         }
      }

   }
}
+2