Problème avec HTML5 XHR FileUpload et ASP.Net

Question

J'essaye de télécharger un fichier en utilisant XMLHttpRequest de HTML5.

Voici mon code:

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

Du côté du serveur, je reçois 0 pour le Request.Files.Count. Toutefois, si je lis le flux d'entrée, je reçois les en-têtes du fichier comme suit:

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

Testing 

------WebKitFormBoundarylAWVSRo5qeSpsnzn-- 

Le fichier téléchargé ne contient que le mot « test ».

Code Serveur:

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

Est-ce que je me manque dans mon client Javascript qui n'est pas peuplant le Request.Files objet sur le serveur? Ou est-il possible de lire uniquement le contenu du fichier sans les en-têtes?

Answer 1

Vous devez utiliser FormData API de XHR2 pour créer un corps de demande multipart/form-data. Vous pouvez ajouter chaque partie form-data par la méthode append(). Il accepte également un File.

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

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

XHR2 prendra soin de têtes appropriés et le codage du corps de la requête et le fichier sera dans cet exemple disponible dans le côté serveur form-data partie avec le nom myfile.

Answer 2

La collection Request.Files ne sera pas remplie à moins que le ContentType de la demande ne soit défini sur multipart/form-data. C'est pourquoi c'est toujours vide pour toi.

Mise à jour

Voici javascript j'ai trouvé sur this site, qui crée les en-têtes nécessaires/limites pour un téléchargement de fichier. Je ne sais pas si cela fonctionnera pour vous, mais il peut:

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