multipart/form-data 可以用javascript發送嗎？

Question

我使用這種形式通過 POST 發送一個文件和文本“名稱”：

<form enctype="multipart/form-data" action="https://site[DOT]net/upload" method="post">
  <input id="name" type="text" />
  <input id="data" type="file" />
  <button type="submit" name="submit" />
</form>

我想使用 javascript 做同樣的事情。 另外我不想被重定向。 我想留在 html 頁面上，只顯示一個彈出窗口“上傳完成”。 我怎樣才能在 javascript（沒有 jquery）中做到這一點？

編輯：

我試過這段代碼，但 POST 不起作用：

<script>
function uploader {
  var formData = new FormData();
  formData.append("name", "Smith");
  formData.append("data", fileInputElement.files[0]);
  var request = new XMLHttpRequest();

  request.open("POST", "https://site[DOT]net/upload");
  request.send(formData);
}
</script>

<form>
    <input id="name" type="text" />
    <input id="data" type="file" />
    <button type="submit" name="submit" />
    <button onclick="uploader()">Click</button>
</form>

Answer 1

使用 javascript 上傳整個表單，包括文件，可以通過使用FormData API和XMLHttpRequest來完成

var form = document.getElementById('myForm'); // give the form an ID
var xhr  = new XMLHttpRequest();              // create XMLHttpRequest
var data = new FormData(form);                // create formData object


xhr.onload = function() {
    console.log(this.responseText); // whatever the server returns
}

xhr.open("post", form.action);      // open connection
xhr.send(data);                     // send data

如果您需要支持 IE10 及以下版本，它會變得越來越復雜，並且在某些情況下需要通過 iFrame 等發布。

Answer 2

如果有人想用新形式而不是 xhr 來做到這一點，這是等效的。 另請參閱： 使用多部分表單數據獲取帖子

 var form = document.getElementById('formid'); form.onsubmit = async (e) => { e.preventDefault(); const form = e.currentTarget; const url = form.action; try { const formData = new FormData(form); const response = await fetch(url, { method: 'POST', body: formData }); console.log(response); } catch (error) { console.error(error); } }

 <form id="formid" enctype="multipart/form-data" action="#" method="post"> <input id="name" type="text" /> <input id="data" type="file" /> <button type="submit" name="submit">Submint</button> </form>