JavaScript文件上传实现_javascript表单处理

<form id="uploadForm" enctype="multipart/form-data">
  <input type="file" id="fileInput" name="myfile" />
  <button type="submit">上传文件</button>
</form>

document.getElementById('uploadForm').addEventListener('submit', function(e) {
  e.preventDefault(); // 阻止默认提交
<p>const fileInput = document.getElementById('fileInput');
const file = fileInput.files[0];</p><p>if (!file) {
alert('请选择一个文件');
return;
}</p><p>const formData = new FormData();
formData.append('myfile', file);</p><p>fetch('/upload', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => {
alert('上传成功: ' + data.message);
})
.catch(error => {
alert('上传失败: ' + error);
});
});</p>

const xhr = new XMLHttpRequest();
<p>xhr.upload.addEventListener('progress', function(e) {
if (e.lengthComputable) {
const percent = (e.loaded / e.total) * 100;
console.log('上传进度: ' + percent.toFixed(2) + '%');
// 可更新页面上的进度条
}
});</p><p>xhr.open('POST', '/upload');
xhr.send(formData);</p>

if (file.size > 5 * 1024 * 1024) {
  alert('文件不能超过5MB');
  return;
}
<p>if (!file.type.startsWith('image/')) {
alert('只允许上传图片');
return;
}</p>