实现本地文件的上传需要使用到HTML5中的File API和FormData对象。以下是一个简单的实现示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文件上传</title>
</head>
<body>
<form id="upload-form">
<label for="file-input">选择文件：</label>
<input type="file" id="file-input" name="file">
<br>
<button type="submit">上传文件</button>
</form>
<script>
var form = document.getElementById('upload-form');
form.addEventListener('submit', function(event) {
event.preventDefault(); // 阻止表单默认提交
var fileInput = document.getElementById('file-input');
var file = fileInput.files[0]; // 获取文件对象
var formData = new FormData();
formData.append('file', file); // 添加文件到formData对象
var xhr = new XMLHttpRequest();
xhr.open('POST', 'http://localhost:8080/upload'); // 发送POST请求到上传文件的后台接口
xhr.send(formData); // 发送表单数据
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log('文件上传成功', xhr.responseText);
}
};
});
</script>
</body>
</html>
以上代码实现了一个简单的文件上传表单，它包含一个文件选择输入框和一个提交按钮。当用户选择了一个文件并点击了提交按钮，会使用AJAX方式将文件上传到指定的后台接口（这里的接口地址是http://localhost:8080/upload，你需要根据自己的需求修改）。
注意，在示例代码中，我们取消了表单的默认提交行为，使用AJAX发送请求。在表单中使用AJAX发送请求会更加简明且专业(expected)，而且还可以较容易地进行前端校验和数据处理。
参考文章：http://blog.ncmem.com/wordpress/2023/12/15/%e7%94%a8html%e5%ae%9e%e7%8e%b0%e6%9c%ac%e5%9c%b0%e6%96%87%e4%bb%b6%e7%9a%84%e4%b8%8a%e4%bc%a0/
欢迎入群一起讨论
标签：文件,formData,表单,xhr,html,本地,var,上传 From： https://www.cnblogs.com/songsu/p/17903073.html