HTML5 XHR FileUpload和ASP.Net的问题

时间:2011-08-28 13:27:32

标签: javascript asp.net html5 file-upload

我正在尝试使用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对象?或者有没有办法只读取没有标题的文件内容?

2 个答案:

答案 0 :(得分:1)

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

<强>更新

这是我在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;
}

答案 1 :(得分: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提供。