Download jQuery ajax file in asp.net mvc

Question

I have a file in my opinion

<form id="upload" enctype="multipart/form-data"> <input type="file" name="fileUpload" id="fileUpload" size="23" /> </form> 

and ajax request

 $.ajax({ url: '<%=Url.Action("JsonSave","Survey") %>', dataType: 'json', processData: false, contentType: "multipart/mixed", data: { Id: selectedRow.Id, Value: 'some date was added by the user here :))' }, cache: false, success: function (data) {} }); 

but Request.Files is missing. What is wrong with ajax request?

Answer 1

Upload files using AJAX in ASP.Net MVC

Everything has changed since HTML5

Javascript

 document.getElementById('uploader').onsubmit = function () { var formdata = new FormData(); //FormData object var fileInput = document.getElementById('fileInput'); //Iterating through each files selected in fileInput for (i = 0; i < fileInput.files.length; i++) { //Appending each file to FormData object formdata.append(fileInput.files[i].name, fileInput.files[i]); } //Creating an XMLHttpRequest and sending var xhr = new XMLHttpRequest(); xhr.open('POST', '/Home/Upload'); xhr.send(formdata); xhr.onreadystatechange = function () { if (xhr.readyState == 4 && xhr.status == 200) { alert(xhr.responseText); } } return false; } 

controller

 public JsonResult Upload() { for (int i = 0; i < Request.Files.Count; i++) { HttpPostedFileBase file = Request.Files[i]; //Uploaded file //Use the following properties to get file name, size and MIMEType int fileSize = file.ContentLength; string fileName = file.FileName; string mimeType = file.ContentType; System.IO.Stream fileContent = file.InputStream; //To save file, use SaveAs method file.SaveAs(Server.MapPath("~/")+ fileName ); //File will be saved in application root } return Json("Uploaded " + Request.Files.Count + " files"); } 

EDIT: HTML

 <form id="uploader"> <input id="fileInput" type="file" multiple> <input type="submit" value="Upload file" /> </form> 

Answer 2

Downloading AJAX files is now possible by passing the FormData object to the data property of the $.ajax request.

Since the OP specifically requested the jQuery implementation, you are here:

 <form id="upload" enctype="multipart/form-data" action="@Url.Action("JsonSave", "Survey")" method="POST"> <input type="file" name="fileUpload" id="fileUpload" size="23" /><br /> <button>Upload!</button> </form> 

 $('#upload').submit(function(e) { e.preventDefault(); // stop the standard form submission $.ajax({ url: this.action, type: this.method, data: new FormData(this), cache: false, contentType: false, processData: false, success: function (data) { console.log(data.UploadedFileCount + ' file(s) uploaded successfully'); }, error: function(xhr, error, status) { console.log(error, status); } }); }); 

 public JsonResult Survey() { for (int i = 0; i < Request.Files.Count; i++) { var file = Request.Files[i]; // save file as required here... } return Json(new { UploadedFileCount = Request.Files.Count }); } 

Additional Information on FormData with MDN

Answer 3

You cannot upload files via ajax, you need to use iFrame or some other trick to do a full postback. This is mainly due to security issues.

Here's a decent record, including a sample project using SWFUpload and ASP.Net MVC from Steve Sanderson. This is the first thing I read so that it works correctly with Asp.Net MVC (I was new to MVC at the time), I hope it will be useful to you.

Answer 4

If you submit the form using ajax, then you cannot submit the image using the $ .ajax method, you must use the classic xmlHttpobject method to save the image, another alternative uses the submit type instead of the button