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返回错误：“不允许的键字符”。此外，它不会发送我需要的唯一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的浏览器

使用XMLHttpRequest Level 2上传问题

1 个答案: