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]); 

, 나는 Request.Files.Count에 대한 0 얻을.

이

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

Testing 

------WebKitFormBoundarylAWVSRo5qeSpsnzn-- 

업로드 된 파일은 단어 "테스트"를 포함 : I는 입력 스트림을 읽으면 다음과 같이 그러나 나는 파일의 헤더를 얻는다.

서버 코드 :

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

나는 Request.Files 서버 개체 채우기되지 내 클라이언트 자바 스크립트에서 누락 있나요? 아니면 헤더없이 파일 내용을 읽을 수있는 방법이 있습니까?

Answer 1

당신은 multipart/form-data 요청 본문을 만들 XHR2의 FormData API를 사용한다. 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 적절한 헤더 요청 체 인코딩이 예에서 이름과 myfileform-data 일부로서 서버 측에서 사용할 수 파일에 대한 관리를 수행한다.

Answer 2

Request.Files 컬렉션은 요청의 ContentType이 multipart/form-data으로 설정되어 있지 않으면 채워지지 않습니다. 그것이 항상 당신을 위해 비어있는 이유입니다.

업데이트

저는 여기에 파일 업로드에 필요한 헤더/경계를 만듭니다, this site에서 발견 자바 스크립트 일부입니다. 확실하지 당신을 위해 작동하지만 수도 경우 :

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