如何通過Javascript FormData API發送變量

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

這段代碼演示了如何同時發送文件和可變字符串參數：

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

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

單擊上方以運行代碼，然后在瀏覽器控制台的“網絡”標簽中查看，您將看到數據已發送。 我懷疑您的問題與頁面上的其他代碼有關。