js如何上传图片

使用 JavaScript 上传图片的核心步骤如下：

创建表单在 HTML 中创建包含文件输入元素的表单：
<form> <input type="file" id="fileInput" accept="image/*"></form>
侦听文件选择事件通过 JavaScript 监听文件输入的变化：
const fileInput = document.getElementById('fileInput');fileInput.addEventListener('change', handleFileSelect);
获取文件对象在事件处理函数中提取用户选择的文件：
function handleFileSelect(e) { const file = e.target.files[0]; // 获取第一个文件 if (!file) return; // 确保文件存在}
创建 FormData 对象将文件添加到 FormData 中，用于模拟表单提交：
const formData = new FormData();formData.append('image', file); // 'image' 是后端接收的字段名
创建并配置 XMLHttpRequest初始化请求并设置必要参数：
const xhr = new XMLHttpRequest();xhr.open('POST', '/upload', true); // 异步 POST 请求// 注意：使用 FormData 时，浏览器会自动设置正确的 Content-Type（含 boundary）// 无需手动设置 `multipart/form-data`，否则可能导致请求头错误
发送请求并处理响应监听请求完成事件并处理服务器返回的数据：
xhr.onload = function() { if (xhr.status === 200) { console.log('上传成功:', xhr.responseText); } else { console.error('上传失败:', xhr.statusText); }};xhr.send(formData); // 发送数据

完整代码示例<form> <input type="file" id="fileInput" accept="image/*"></form><script> document.getElementById('fileInput').addEventListener('change', function(e) { const file = e.target.files[0]; if (!file) return; const formData = new FormData(); formData.append('image', file); const xhr = new XMLHttpRequest(); xhr.open('POST', '/upload', true); xhr.onload = function() { if (xhr.status === 200) { alert('上传成功！'); } else { alert('上传失败！'); } }; xhr.send(formData); });</script>关键注意事项

自动 Content-Type：使用 FormData 时，浏览器会自动生成正确的 Content-Type（如 multipart/form-data; boundary=...），无需手动设置，否则会导致请求格式错误。
文件验证：可通过 file.type 检查 MIME 类型（如 image/jpeg），或限制文件大小（file.size）。
现代替代方案：推荐使用 fetch API 或 axios 简化代码（例如 fetch('/upload', { method: 'POST', body: formData })）。

常见问题解决

跨域问题：确保服务器配置 CORS 头（如 Access-Control-Allow-Origin: *）。
进度监控：通过 xhr.upload.onprogress 事件实现上传进度条。

通过以上步骤，即可实现基础的图片上传功能。

您可能感兴趣问答

Collapsible

热门标签

热点问答