调整要上传的图像后，将XHR请求与表单测试结合在一起

Question

我正在尝试将同时上传和调整客户端的图像发送给PHP页面。

图像发送正常，但是当我尝试附加文本数据时，它将无法正常工作。

 var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function(ev){
        document.getElementById('filesInfo').innerHTML = 'Done!';
    };
    xhr.open('POST', 'uploadResized.php', true);
    xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    var data = new FormData();
    data = 'image=' + dataURL;
    data.append('Name', 'test');
    xhr.send(data);

当我尝试将字符串附加到测试中时，数据根本不会发送。但是，如果没有附加，它仍然会发送。我该如何附加信息？

Answer 1

我认为当您进行data = 'image=' + dataURL;时，您将VAR data重新定义为字符串。因此，该名称的附加方法是失败的。我认为您有2个选择：

1：使用formdata((构造函数：

 var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function(ev){
        document.getElementById('filesInfo').innerHTML = 'Done!';
    };
    xhr.open('POST', 'uploadResized.php', true);
    xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    var data = new FormData();
    data.append('image', dataURL);
    data.append('Name', 'test');
    xhr.send(data);

2：不使用formdata((构造函数：

 var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function(ev){
        document.getElementById('filesInfo').innerHTML = 'Done!';
    };
    xhr.open('POST', 'uploadResized.php', true);
    xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    var data = 'image=' + dataURL + '&Name=test';
    xhr.send(data);