Проблема с HTML5 XHR FileUpload и ASP.Net

Question

Я пытаюсь загрузить файл, используя HTML5 XMLHttpRequest.

Вот мой код:

var xhr = new XMLHttpRequest();
xhr.open("POST", "receive.aspx", true);
//xhr.setRequestHeader("Content-Type", "multipart/form-data");
xhr.setRequestHeader("Content-Type", "application/octet-stream");
xhr.send($("#fileobject").files[0]);

На стороне сервера я получаю 0 для Request.Files.Count. Однако, если я читаю поток ввода, я получаю заголовки файла следующим образом:

------WebKitFormBoundarylAWVSRo5qeSpsnzn Content-Disposition:
form-data; name="fileToUpload"; filename="a.txt" Content-Type:
application/octet-stream

Testing

------WebKitFormBoundarylAWVSRo5qeSpsnzn--

Загруженный файл содержит только слово «Тестирование».

Код сервера:

Stream inputStream = Request.InputStream;
FileStream fileStream = new FileStream("c:\\test.txt", FileMode.OpenOrCreate);
inputStream.CopyTo(fileStream); 
fileStream.Close();

Есть ли что-то, чего мне не хватает в моем клиентском Javascript, который не заполняет объект Request.Files на сервере? Или есть ли способ прочитать только содержимое файла без заголовков?

Answer 1

Вы должны использовать XHR2 FormData API для создания multipart/form-data тела запроса.Вы можете добавить каждую form-data часть методом append().Он также принимает File.

var formData = new FormData();
formData.append("myfile", $("#fileobject").files[0]);

var xhr = new XMLHttpRequest();
xhr.open("POST", "receive.aspx");
xhr.send(formData);

XHR2 позаботится о правильных заголовках и запросе кодировки тела, и файл в этом примере будет доступен на стороне сервера как form-data часть с именем myfile.

Answer 2

Коллекция Request.Files не будет заполнена, если для ContentType запроса не установлено значение multipart/form-data. Вот почему он всегда пуст для вас.

Обновление

Вот некоторый JavaScript, который я нашел на этом сайте , который создает необходимые заголовки / границы для загрузки файла. Не уверен, что это будет работать для вас, но это может:

function fileUpload(url, fileData, fileName) {
   var fileSize = fileData.length,
     boundary = "xxxxxxxxx",
     xhr = new XMLHttpRequest();

   xhr.open("POST", url, true);
          // simulate a file MIME POST request.
   xhr.setRequestHeader("Content-Type", "multipart/form-data, boundary="+boundary);
   xhr.setRequestHeader("Content-Length", fileSize);

   var body = "--" + boundary + "\r\n";
   body += 'Content-Disposition: form-data; name="contents"; filename="' + fileName + '"\r\n';
   body += "Content-Type: application/octet-stream\r\n\r\n";
   body += fileData + "\r\n";
   body += "--" + boundary + "--";

   xhr.send(body);
   return true;
}