Le corps de la charge utile de la requête Ajax n'est pas formaté correctement

Question

Je définis mes en-têtes dans un AJAX POST et POSTing fonctionne correctement, mais le corps de la charge utile de la requête n'est pas formaté comme je l'avais prévu.

for (var i = 0; i < files.length; i++) { 
var boundary = '--AJAX--' + b.util.randomString(); 
var fileName = files[i].fileName; 
var fileSize = files[i].fileSize; 
var fileType = files[i].type; 

var parts = []; 
var part = ''; 
part += 'Content-Disposition: file;' + CRLF; 
part += 'name= "' + fieldName + '"; ' + CRLF; 
part += 'filename="' + fileName + '"' + CRLF; 
part += 'Content-Type: ' + fileType + ';' + CRLF; 
part += 'name="' + 'timestamp' + '"' + CRLF + CRLF; 
part += getDateTime() + CRLF; 
parts.push(part); 

var data = '--' + boundary + CRLF; 
data += parts.join('--' + boundary + CRLF); 
data += '--' + boundary + '--' + CRLF; 

// Wrap in a closure to preserve our increment value [i] 
(function(i) { 
    files = $.extend(true, {}, files); 

    $.ajax({ 
     url: $form, 
     type: 'POST', 
     beforeSend: function(xhr) { 
      xhr.setRequestHeader('Content-Type', 'multipart/form-data; boundary=' + boundary); 
      xhr.setRequestHeader('X-File-Name', fileName); 
      xhr.setRequestHeader('X-File-Size', fileSize); 
      xhr.setRequestHeader('X-File-Type', fileType); 
     }, 
     data: { 
      userfile: data 
     }, 
     success: function(data) { 
     }, 
     error: function(e) { 
     } 
    }); 
})(i); 
}​ 

devient formaté pour:

/* 
userfile=--AJAX-----------------------------2Bw0sHPkE4%0D%0AContent-Disposition%3A+file%3B%0D%0Aname%3D+%22userfile%5B%5D%22%3B+filename%3D%22MPK0l.jpg%22%0D%0AContent-Type%3A+image%2Fjpegname%3D%22timestamp%22%0D%0A%0D%0A1330556315.828%0D%0A--AJAX-----------------------------2Bw0sHPkE4--%0D%0A 
*/ 

ce qui est évidemment tient pas compte de tous mes sauts de ligne et de retour chariot.

Devrais-je créer explicitement mon objet xhr et utiliser xhr.send() ou puis-je utiliser ajax() de jQuery avec ceci?

Answer 1

Quelques citations de RFC1867:

Si plusieurs fichiers sont sélectionnés, ils doivent être transférés ensemble en utilisant le format mixte multipart/.

Content-Type: multipart/form-data * , * = limite AaB03x comma is used, not a semicolon

Après tout, je ne suis pas sûr, les données brutes POST pourrait être préparé par XHR.

Answer 2

A décidé de créer l'objet XHR au lieu d'utiliser ajax() de jQuery.

 for (var i = 0, f; f = files[i]; i++) { 
      (function(i) { 
       var xhr = new XMLHttpRequest(); 
       var reader = new FileReader(); 

       xhr.open('POST', $form, true); 

        reader.onload = function(e) { 
        var boundary = '--AJAX--' + b.util.randomString(); 
        var binaryFile = e.target.result; 
        var fileName = files[i].fileName; 

        xhr.setRequestHeader('Content-Type', 'multipart/form-data; boundary=' + boundary); 
        xhr.setRequestHeader('X-File-Name', files[i].fileName); 
        xhr.setRequestHeader('X-File-Size', files[i].fileSize); 
        xhr.setRequestHeader('X-File-Type', files[i].type); 

        var parts = []; 
        var part = ''; 
        part += 'Content-Disposition: file; '; 
        part += 'name="' + fieldName + '"' + CRLF; 
        part += 'Content-Type: ' + files[i].type; 
        part += CRLF + 'Content-Transfer-Encoding: binary' + CRLF + CRLF; 
        part += binaryFile + CRLF; 
        parts.push(part); 

        part = 'Content-Disposition: form-data; '; 
        part += 'name="' + 'timestamp' + '"' + CRLF + CRLF; 
        part += getDateTime() + CRLF; 
        parts.push(part); 

        var data = '--' + boundary + CRLF; 
        data += parts.join('--' + boundary + CRLF); 
        data += '--' + boundary + '--' + CRLF; 
        xhr.sendAsBinary(data); 
        }; 
       reader.readAsBinaryString(files[i]); 
      })(i); 
     }