CoffeeCode CoffeeCode - 4 months ago 20
jQuery Question

jQuery ajax upload file in mvc

i have a file in my view

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

and an ajax request

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 there is no file in the Request.Files. Whats wrong with the ajax request?


Upload files using AJAX in ASP.Net MVC

Things have changed since HTML5


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();'POST', '/Home/Upload');
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
    return false;


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's 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");


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