Question

我正在努力让AJAX文件（图片）上传工作，但我在通过formData API发送变量时遇到了一些问题：

这是formData代码：

var data = new FormData();
data.append('SelectedFile', _file.files[0]);
data.append('name', event_title);

正如您在第3行所看到的，我正在尝试同时向服务器发送变量。 event_title定义为

var event_title = document.getElementById("new_event_title").value;

然后在formData代码之前调用它。

我可以将正常文本发送到服务器，例如

date.append("name", "enter-name");

但是，当我将其更改为变量时，它将停止工作。

我已经检查过MDN和HTML5rocks无济于事，所以如果有人能提供帮助，我会很感激。

Answer 1

此代码演示了如何同时发送文件和变量字符串参数：

＆＃13;

document.getElementById("submitBtn").onclick = function(){
    var event_title = document.getElementById("new_event_title").value;
    var file = document.getElementById("file").files[0];
    
    var data = new FormData();
    data.append('SelectedFile', file);
    data.append('name', event_title);
    
    var xhr = new XMLHttpRequest();
    xhr.open('POST', 'http://example.com/', true);
    xhr.send(data);
};

＆＃13;

<input type="text" id="new_event_title" value="My Event Title">
<input type="file" id="file">
<br>
<input type="submit" id="submitBtn" value="Send">

＆＃13;

单击上方以运行代码并查看浏览器控制台的网络选项卡，您将看到数据已发送。我怀疑您的问题与您网页上的其他代码有关。

如何通过Javascript formData API发送变量

1 个答案: