multipart/form-data 可以用 javascript 发送吗?

2024-03-04

我使用以下形式通过 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)?

EDIT:

我尝试了这段代码,但 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>

如果有人想使用新的 fetch 而不是 xhr 来执行此操作,这是等效的。另请参阅:如何使用 fetch 发布多部分表单数据? https://stackoverflow.com/questions/35192841/fetch-post-with-multipart-form-data

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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

multipart/form-data 可以用 javascript 发送吗? 的相关文章

随机推荐