XmlHttpRequest corrompt les en-têtes dans Firefox 3.6 avec "Content-Type: multipart/form-data"

Question

Je travaille sur "multiple ajax uloader". Fonctionne très bien dans les navigateurs de pointe (Chrome 6, Firefox 4). Mais dans Firefox 3.6, je dois créer manuellement une chaîne de sortie à envoyer car ce navigateur ne supporte pas l'objet FormData.

J'ai suivi de nombreux didacticiels, notamment this. Auteur notifier sur la configuration correcte des en-têtes & contenu du corps à être envoyé. J'ai suivi attentivement ces conseils, mais Firefox 3.6 échoue mes efforts.

Ceci est la configuration correcte des en-têtes et le corps (capturé en soumettant forme statique simple requise): correct headers, correct body

C'est ce que je reçois, quand j'utilise l'objet XHR de Firefox pour soumettre les mêmes données: wrong headers, wrong body

Comme vous pouvez le voir, les en-têtes de xhr sont corrompus. Cela conduit à l'échec total du téléchargement de fichiers. Voici un code que j'utilise:

function generateBoundary() 
{ 
    var chars = '', 
     out = ''; 

    for(var i = 0, len = chars.length; i < 30; i++) { 
     out += chars[Math.floor(Math.random()*len)]; 
    } 

    return '----' + out; 
} 

function getMultipartFd(file, boundary) 
{ 
    var rn = '\r\n', 
     body = ''; 

    body = boundary + rn; 
    body += 'Content-Disposition: form-data; name="Files[]"; filename="' + file.name + '"' + rn; 
    body += 'Content-Type: ' + file.type + rn + rn; 
    body += file.getAsBinary() + rn; 

    return body; 
} 

$(function(){ 

    $startUpload.click(function(){ 
     var url  = $uploadForm.attr('action'), 
      xhr  = new XMLHttpRequest(), 
      boundary = generateBoundary(), 
      file  = null, 
      body  = ''; 

     file = $SOME_ELEMENT_WITH_ATTACHED_FILE.file; 
     body = getMultipartFd(file, boundary); 

console.info(file); 
console.info(body); 

     xhr.upload.onload = function(){ 
      console.info('done'); 
     }; 

     xhr.open('POST', url, true); 
     xhr.setRequestHeader('Content-Type', 'multipart/form-data; boundary=' + boundary); 
     xhr.sendAsBinary(body + boundary + '--' + '\r\n'); 
     return false; 
    }); 

}); 

Voici également un vidage de fichier et les variables corps: dump file, dump body

ont une idée qui que ce soit, pourquoi XHR est-têtes corruptrices de cette façon?

Answer 1

J'avais un problème de portée. J'ai essayé d'utiliser le code dans l'installation de Firefox sous WinXP (mon système principal est Arch Linux). Le problème reste. J'ai trouvé que Mozilla's xhr a la propriété supplémentaire appelée «multipart». Avec ce paramètre à true, les en-têtes sont OK, mais mes xhr.events ne sont pas déclenchés - JS se bloque après l'envoi du fichier.

J'ai approfondi le problème avec le débogueur JS de Firebug et j'ai découvert qu'après le code xhr.multipart = true;, le code saute dans les eaux profondes de la bibliothèque jQuery, où des choses étranges se produisent autour de certains événements curieux.

Encore plus curiou est que les en-têtes/contenu semble être juste dans la console de Firebug, mais dans l'extension HttpFox, il est corrompu.