假设我在页面上有以下元素:
<input id="image-file" type="file" />
这将创建一个按钮，允许网页的用户通过浏览器中的操作系统“文件打开…”对话框选择文件。
假设用户点击该按钮，在对话框中选择了一个文件，然后点击“确定”按钮关闭对话框。
现在所选的文件名已存储在：
document.getElementById("image-file").value
现在，假设服务器在URL "/upload/image"处处理多部分POST请求。
我该如何将文件发送到"/upload/image"？
另外，我该如何监听通知以确保文件上传已完成？
你可以使用 fetch，可选地与 await-try-catch 一起使用。
let photo = document.getElementById("image-file").files[0];
let formData = new FormData();
formData.append("photo", photo);
fetch('/upload/image', {method: "POST", body: formData});
async function SavePhoto(inp)
{
let user = { name:'john', age:34 };
let formData = new FormData();
let photo = inp.files[0];
formData.append("photo", photo);
formData.append("user", JSON.stringify(user));
const ctrl = new AbortController() // timeout
setTimeout(() => ctrl.abort(), 5000);
try {
let r = await fetch('/upload/image',
{method: "POST", body: formData, signal: ctrl.signal});
console.log('HTTP response code:',r.status);
} catch(e) {
console.log('Huston we have problem...:', e);
}
}<input id="image-file" type="file" onchange="SavePhoto(this)" >
<br><br>
Before selecting the file open chrome console > network tab to see the request details.
<br><br>
<small>Because in this example we send request to https://stacksnippets.net/upload/image the response code will be 404 ofcourse...</small>
<br><br>
(in stack overflow snippets there is problem with error handling, however in <a href="https://jsfiddle.net/Lamik/b8ed5x3y/5/">jsfiddle version</a> for 404 errors 4xx/5xx are <a href="https://dev59.com/W1wX5IYBdhLWcg3w0SNf#33355142">not throwing</a> at all but we can read response status which contains code)传统方法 - xhr
let photo = document.getElementById("image-file").files[0]; // file from input
let req = new XMLHttpRequest();
let formData = new FormData();
formData.append("photo", photo);
req.open("POST", '/upload/image');
req.send(formData);
function SavePhoto(e)
{
let user = { name:'john', age:34 };
let xhr = new XMLHttpRequest();
let formData = new FormData();
let photo = e.files[0];
formData.append("user", JSON.stringify(user));
formData.append("photo", photo);
xhr.onreadystatechange = state => { console.log(xhr.status); } // err handling
xhr.timeout = 5000;
xhr.open("POST", '/upload/image');
xhr.send(formData);
}<input id="image-file" type="file" onchange="SavePhoto(this)" >
<br><br>
Choose file and open chrome console > network tab to see the request details.
<br><br>
<small>Because in this example we send request to https://stacksnippets.net/upload/image the response code will be 404 ofcourse...</small>
<br><br>
(the stack overflow snippets, has some problem with error handling - the xhr.status is zero (instead of 404) which is similar to situation when we run script from file on <a href="https://dev59.com/nm445IYBdhLWcg3wKHEJ#10173639">local disc</a> - so I provide also js fiddle version which shows proper http error code <a href="https://jsfiddle.net/Lamik/k6jtq3uh/2/">here</a>)概要
filename formData参数自动读取原始文件名（和其他信息）。Content-Type为multipart/form-data - 浏览器将自动设置它，并包括强制性的boundary参数。/upload/image，您还可以使用完整的地址，如http://.../upload/image。同时，参数method也是任意的，通常在服务器上用于文件上传的是“POST”，但有时可能会用到“PUT”或其他方法。multiple属性：<input multiple type=... />，并以类似的方式连接所有选择的文件 (e.g. photo2=...files[2];... formData.append("photo2", photo2);)let user = {name:'john', age:34}：formData.append("user", JSON.stringify(user));AbortController为fetch设置超时，对于旧的方法，可以通过xhr.timeout = milisec进行设置。POST http://localhost:8000/upload/image 404 (未找到)的错误。在我的React Node测试项目的/src和/public目录下创建了/upload/image。 - Jay J除非你正在尝试使用ajax上传文件，否则只需将表单提交到/upload/image。
<form enctype="multipart/form-data" action="/upload/image" method="post">
<input id="image-file" type="file" />
</form>
如果你想要在后台上传图片（例如不提交整个表单），你可以使用ajax：
我已经尝试了一段时间，但是这些答案都不能起作用。以下是我的解决方法。
我有一个选择文件和提交按钮。
<input type="file" name="file" id="file">
<button onclick="doupload()" name="submit">Upload File</button>
然后在我的 JavaScript 代码中，我加入了这段代码
function doupload() {
let data = document.getElementById("file").files[0];
let entry = document.getElementById("file").files[0];
console.log('doupload',entry,data)
fetch('uploads/' + encodeURIComponent(entry.name), {method:'PUT',body:data});
alert('your file has been uploaded');
location.reload();
};
function doupload() {
let data = document.getElementById("file").files[0];
let entry = document.getElementById("file").files[0];
console.log('doupload',entry,data)
fetch('uploads/' + encodeURIComponent(entry.name), {method:'PUT',body:data});
alert('your file has been uploaded');
};<input type="file" name="file" id="file">
<button onclick="doupload()" name="submit">Upload File</button>PUT方法与POST方法略有不同。在这种情况下，使用chrome的web服务器时，POST方法未实现。以下是关于提交包含非表单文件的表单的答案：
const formData = new FormData();
const files = event.target.files;
for (const file of files) {
formData.append('files[]', file);
}
$.ajax({
type: "POST",
url: urlString,
data: formData,
error : function (result) {
console.log('error', result);
},
success : function (result) {
console.log('success', result)
}
});