调整要上传的图像大小后将 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为一个字符串。所以名称的 append 方法失败了。我认为你有两个选择：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);