XMLHttpRequest Level 2 的上传问题

Question

我正在尝试使用 HTML5 通过拖放上传文件。拖放位没有问题 - 我可以通过将 base64 转储到 img src 标签中来立即显示我拖动的图像。但是，我需要通过 POST 将文件传递给服务器。在同一个请求中，我还需要传递一个唯一 ID。这是我的处理函数的样子：

function processXHR (file)
{
    var xhr = new XMLHttpRequest(); 
    var fileUpload = xhr.upload;

    fileUpload.addEventListener("progress", uploadProgressXHR, false);

    fileUpload.addEventListener("error", uploadErrorXHR, false);

    xhr.open("POST", "changePicture");
    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xhr.setRequestHeader("Content-length", file.length);

    xhr.sendAsBinary(file.getAsBinary());
    xhr.setRequestHeader("Connection", "close");

}

但是，这样做会从 codeigniter 中返回错误：“Disallowed Key Characters”。此外，它不会发送我需要的唯一 ID。所以我改了几行：

var params = "card_num="+selected+"&newPicture="+file.getAsBinary();
xhr.open("POST", "changePicture");
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.setRequestHeader("Content-length", params.length);
xhr.send(params);
xhr.setRequestHeader("Connection", "close");

但这只是将文件作为字符串发送。我需要在这里做什么？

Answer 1

function processXHR(file) {
    var formData = new FormData();
    var xhr = new XMLHttpRequest();

    formData.append(file.name, file);

    xhr.open('POST', "/upload", true);
    xhr.onload = function(e) {
        console.log("loaded!")
    };

    xhr.send(formData);
    return false;
}

显然这只适用于支持 XMLHttpRequest Level 2 的浏览器