需借助HTML5的File API与FormData实现图片选择、预览及上传：一、用input[type="file"]获取图片文件；二、用FileReader读取为Data URL实现预览；三、用FormData组织数据；四、用fetch或XMLHttpRequest发送至服务器。
如果您希望在网页中实现用户选择本地图片并即时预览，同时将图片数据发送至服务器，则需借助 HTML5 的 File API 与 FormData。以下是实现该功能的具体步骤：
一、使用 input type="file" 获取图片文件
通过原生 file 输入控件捕获用户选取的图片文件对象，这是整个流程的起点，为后续读取与传输提供原始数据源。
1、在 HTML 中添加带有 accept 属性的文件输入框，限定仅允许图片类型：<input type="file" id="imageInput" accept="image/*">
2、为该元素绑定 change 事件监听器，确保用户选择文件后立即触发处理逻辑。
立即学习“前端免费学习笔记（深入）”；
3、在事件回调中通过 event.target.files[0] 获取首个选中的 File 对象。
二、利用 FileReader 实现客户端图片预览
FileReader 可将 File 对象异步读取为 Data URL，从而在 <img> 标签中直接显示，无需上传服务器即可完成即时预览。
1、创建新的 FileReader 实例：const reader = new FileReader();
2、为 reader 设置 onload 回调函数，在其中将 reader.result 赋值给预览 img 元素的 src 属性。
3、调用 reader.readAsDataURL(file) 启动读取过程。
三、通过 FormData 构建可上传的图片数据包
FormData 提供了标准方式来组织表单数据，支持二进制文件附加，是向服务器提交图片最兼容且简洁的方法。
1、新建 FormData 实例：const formData = new FormData();
2、使用 append 方法将 File 对象加入表单数据，指定字段名为 server 接收端预期的键名，例如 'image'。
3、可额外追加其他字段（如描述文本），调用 formData.append('desc', '用户头像')。
四、使用 fetch 发送图片至服务器
fetch API 支持直接传递 FormData 实例，自动设置合适的 Content-Type（multipart/form-data）及边界标识，简化上传请求构造。
1、配置 fetch 请求选项，method 设为 POST，body 直接传入已构建好的 formData。
2、确保服务器接口路径正确，例如：fetch('/api/upload', { method: 'POST', body: formData })
3、处理响应结果，检查 status 是否为 200，并解析返回的 JSON 数据（如服务器返回图片 URL）。
五、使用 XMLHttpRequest 替代 fetch 进行上传
XMLHttpRequest 是更底层的网络请求方式，适用于需监听上传进度或兼容较老浏览器的场景，其对 FormData 的支持同样完善。
1、创建 XHR 实例：const xhr = new XMLHttpRequest();
2、绑定 onreadystatechange 回调，判断 xhr.readyState === 4 且 xhr.status === 200 后处理响应。
3、调用 xhr.open('POST', '/api/upload') 初始化请求，再执行 xhr.send(formData) 发起上传。
