js如何上传文件
最新回答
梅之傲然立
2023-07-29 01:05:25
使用 JavaScript 上传文件的核心步骤如下：
1. 创建文件输入元素在 HTML 中添加一个文件选择输入框，允许用户选择本地文件：
<input type="file" id="file-input" multiple>- multiple 属性允许用户选择多个文件（可选）。
通过 JavaScript 监听文件选择变化，触发后续处理逻辑：
const fileInput = document.getElementById('file-input');fileInput.addEventListener('change', handleFileSelect);3. 获取选定的文件在事件处理函数中，从 event.target.files 获取用户选择的文件列表：
function handleFileSelect(event) { const files = event.target.files; // FileList 对象 if (!files.length) return; // 未选择文件时退出 uploadFiles(files); // 调用上传函数}4. 构建 FormData 对象将文件数据封装到 FormData 中，支持多文件上传：
function uploadFiles(files) { const formData = new FormData(); for (let i = 0; i < files.length; i++) { formData.append('files[]', files[i]); // 'files[]' 为后端接收的字段名 } // 可添加其他表单字段 formData.append('userId', '123'); sendRequest(formData);}5. 发起 AJAX 请求使用 fetch API（推荐）或 XMLHttpRequest 发送数据：
方式一：fetch APIasync function sendRequest(formData) { try { const response = await fetch('/upload', { method: 'POST', body: formData, // 自动设置 Content-Type 为 multipart/form-data // 无需手动设置 headers，浏览器会自动处理 }); const result = await response.json(); console.log('上传成功:', result); } catch (error) { console.error('上传失败:', error); }}方式二：XMLHttpRequestfunction sendRequest(formData) { const xhr = new XMLHttpRequest(); xhr.open('POST', '/upload'); xhr.onload = function() { if (xhr.status === 200) { console.log('上传成功:', JSON.parse(xhr.responseText)); } else { console.error('上传失败'); } }; xhr.onerror = () => console.error('请求错误'); xhr.send(formData);}6. 处理服务器响应根据服务器返回的数据（如 JSON）更新页面或提示用户：
// 在 fetch 的 then 或 async/await 中处理.then(response => response.json()).then(data => { alert(`上传成功！文件ID: ${data.fileIds.join(', ')}`);}).catch(error => alert(`错误: ${error.message}`));关键注意事项- Content-Type：使用 FormData 时，浏览器会自动设置正确的 multipart/form-data，无需手动指定。
- 进度监控：如需显示上传进度，使用 XMLHttpRequest 的 upload.onprogress 事件：xhr.upload.onprogress = (event) => { const percent = Math.round((event.loaded / event.total) * 100); console.log(`上传进度: ${percent}%`);};
- 文件限制：前端可通过 file.size 和 file.type 校验文件大小和类型。
- 安全性：后端必须验证文件内容（如病毒扫描、扩展名白名单），避免恶意文件上传。
通过以上步骤，即可实现完整的文件上传功能。
热门标签
