多部分/表单数据可以使用JavaScript发送
multipart/form-data possible to send with javascript?
我使用以下表格通过 POST 发送一个文件以及文本"name":
<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>
如果有人想用新的fetch而不是xhr来做到这一点,这是等效的。另请参阅:如何使用 fetch 对多部分表单数据进行 POST?
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>
使用
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等发布。
相关文章:
- 将照片从javascript发送到php
- javascript:发送带有音频文件的POST,然后重定向到新页面
- 使用JSFtp和Javascript发送文件
- 从函数javascript发送变量
- “未定义的索引:itemdetails”,当将JSON对象从JavaScript发送到PHP时
- 从c++向javascript发送消息
- 如何用javascript发送多个文件没有jQuery我想要每个文件一个进度条
- 如何在 ajax 中使用 javascript 发送多个数据并将其重定向到欢迎页面
- 使用自定义 SMTP 通过 JavaScript 发送电子邮件
- 有没有办法将值从JavaScript发送到CodeIgniter中的控制器
- 将变量从 Javascript 发送到 Javascript
- 如何在Joomla模块中通过JavaScript发送输入文件类型
- 使用javascript发送特殊字符
- 将图像从javascript发送到C#
- 将servlet请求从javascript发送到java给出了“;请求的资源不可用”;
- 如何将一个变量从javascript发送到django中的View
- 从javascript发送回车
- 如何在打开连接时从Javascript发送一些附加数据,如用户名或时间
- 将数据从javascript发送到html并使用php获取
- ASP.net web服务使用javascript发送命令