php - 调整要上传的图像大小后，将 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 重新定义为字符串。所以名称的追加方法失败了。我认为你有两个选择:

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