Ajax 请求负载正文格式不正确答案

【问题标题】：Ajax request payload body not formatted properlyAjax 请求负载正文格式不正确
【发布时间】：2012-03-20 08:25:17
【问题描述】：

我在 AJAX POST 中设置我的标头，并且 POST 工作正常，但请求有效负载正文的格式不符合我的预期。

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

正在格式化为：

/*
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
*/

这显然忽略了我所有的换行符和回车符。

我是否必须显式创建我的 xhr 对象并使用 xhr.send() 或者我可以使用 jQuery 的 ajax() 吗？

【问题讨论】：

标签： javascript jquery ajax xmlhttprequest

【解决方案1】：

来自RFC1867的一些引用：

如果选择了多个文件，它们应该一起传输使用多部分/混合格式。

内容类型：multipart/form-data*,* boundary=AaB03x comma is used, not a semicolon

毕竟，我不确定是否可以通过 xhr 准备原始 POST 数据。

【讨论】：

那是什么？我必须自己制作 xhr 对象，或者我可以使用 jQuery 的 ajax() 实用程序？
如果不可能，那么无论是在 jQuery 中还是在普通的 xhr 中都不可能。如果要在后台发送文件，请使用form target + iframe。

【解决方案2】：

决定从而不是使用 jQuery 的 ajax() 创建 XHR 对象。

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

【讨论】：