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

时间:2016-02-19 17:55:57

标签: javascript html ajax

我通过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页面上,只显示弹出窗口&#34;上传完成&#34;。我怎么能在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>

2 个答案:

答案 0 :(得分:1)

使用javascript(包括文件)上传整个表单可以使用FormData APIXMLHttpRequest

完成
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等发布。

答案 1 :(得分:0)

如果有人想用新形式而不是xhr来做到这一点,那么这是等效的。另请参阅: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>