我通过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>
答案 0 :(得分: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等发布。
答案 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>