Question

I am trying to upload files using AJAX to ASP.NET. I have this Javascript:

var xhr = new XMLHttpRequest();

for (var i = 0; i < files.length; i++) {
   xhr.open('post', '/File/Upload', true);
   xhr.setRequestHeader("Content-Type", "multipart/form-data");
   var formData = new FormData();
   formData.append("_file", files[i]);
   xhr.send(files[i]);
}

files is an Array()

Then I try to access the post file in C# code, but the value is always null. How can I resolve this issue?

// Method 1, Result: file = null
HttpPostedFileBase file = Request.Files["_file"];

// Method 2, Result: postedFile.Count = 0
HttpFileCollectionBase postedFile = Request.Files;

Answer 1

Assuming you have the following form containing the file input field:

<form action="/home/index" method="post" enctype="multipart/form-data" onsubmit="return handleSubmit(this);">
    <input type="file" id="_file" name="_file" multiple="multiple" />
    <button type="submit">OK</button>
</form>

you could try the following function:

function handleSubmit(form) {
    if (!FormData) {
        alert('Sorry, your browser doesn\'t support the File API => falling back to normal form submit');
        return true;
    }

    var fd = new FormData();
    var file = document.getElementById('_file');
    for (var i = 0; i < file.files.length; i++) {
        fd.append('_file', file.files[i]);
    }

    var xhr = new XMLHttpRequest();
    xhr.open(form.method, form.action, true);
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
            alert(xhr.responseText);
        }
    };
    xhr.send(fd);

    return false;
}

Now on the server you should be able to retrieve the file using Request.Files.