JavaScript 可以使用表单提交来实现文件上传。首先,在 HTML 中创建一个文件输入框:
<input type="file" id="fileInput">
然后,在 JavaScript 中获取文件输入框的引用,并在其上设置事件监听器,如下所示:
var fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', function () {
// 在这里处理选择的文件
});
在事件监听器中,可以使用 fileInput.files[0]
属性获取选择的文件,然后对文件进行处理。
接下来可以使用 XMLHttpRequest
或 fetch
API 来上传文件。
使用 XMLHttpRequest
:
var file = fileInput.files[0];
var formData = new FormData();
formData.append('file', file);
var xhr = new XMLHttpRequest();
xhr.open('POST', 'url', true);
xhr.onload = function () {
if (xhr.status === 200) {
console.log('upload success');
}
};
xhr.send(formData);
使用 fetch
:
var file = fileInput.files[0];
var formData = new FormData();
formData.append('file', file);
fetch('url', {
method: 'POST',
body: formData
}).then(response => {
if (response.ok) {
console.log('upload success');
}
});
另外还可以使用第三方库如 axios
来实现文件上传,具体实现方法可以参考相关文档。