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--

上传的文件只包含“Testing”一词。

服务器代码：

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 请求正文。您可以通过append() 方法附加每个form-data 部分。它还接受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

除非请求的 ContentType 设置为 multipart/form-data，否则不会填充 Request.Files 集合。这就是为什么它对你来说总是空的。

更新

这是我在this site 上找到的一些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;
}