HTML5可通过input file控件、FileReader预览图片，校验类型大小，用FormData提交，并借助Canvas压缩及multiple属性实现批量上传。
如果您希望在网页中实现图片上传功能，HTML5 提供了原生的文件选择控件与 JavaScript API 支持，无需依赖第三方插件即可完成客户端图片预览、限制类型与大小、提交至服务器等操作。以下是具体实现方式与表单配合技巧：
一、使用 input type="file" 选择图片并预览
通过设置 accept 属性限定仅允许图片格式，并利用 FileReader API 在客户端读取并显示所选图片，避免页面刷新即可实时预览。
1、在 HTML 中添加带 accept 属性的文件输入控件：<input type="file" id="imageUpload" accept="image/*">
2、为该元素绑定 change 事件监听器，获取用户选择的文件对象。
立即学习“前端免费学习笔记（深入）”；
3、创建 FileReader 实例，调用 readAsDataURL 方法将图片文件转为 base64 数据 URL。
4、在 load 事件回调中，将 result 属性值赋给 <img> 元素的 src 属性以实现预览。
二、限制上传图片的格式与大小
在用户选择文件后立即校验其 MIME 类型与字节长度，防止非法文件进入后续流程，提升表单健壮性。
1、从 event.target.files[0] 获取 File 对象。
2、检查 file.type 是否匹配预设的图片 MIME 类型，如 "image/jpeg"、"image/png" 或 "image/gif"。
3、判断 file.size 是否小于等于指定阈值（例如 5MB），单位为字节，即 5 * 1024 * 1024。
4、若任一条件不满足，清空 input 的 value 并提示用户重新选择。
三、通过 FormData 构建多部分表单数据
当需将图片与其他表单字段一同提交时，FormData 接口可自动序列化为 multipart/form-data 格式，兼容传统后端接收逻辑。
1、创建新的 FormData 实例：const formData = new FormData();
2、使用 append 方法添加图片文件：formData.append("photo", file);
3、追加其他字段，例如用户名：formData.append("username", "zhangsan");
4、将 formData 作为 fetch 或 XMLHttpRequest 的请求体发送。
四、使用 Canvas 进行图片压缩后再上传
为减少传输体积与服务器压力，可在上传前对高分辨率图片进行缩放与质量压缩，适用于移动端或网络受限场景。
1、创建临时 <canvas> 元素，并获取其 2D 绘图上下文。
2、设置 canvas 宽高为目标尺寸（如最大宽度 1080 像素，等比缩放高度）。
3、调用 drawImage 方法将原始图片绘制到 canvas 上。
4、使用 toBlob 方法导出压缩后的图片 Blob：canvas.toBlob(callback, "image/jpeg", 0.8);
五、处理多个图片文件的批量上传
支持用户一次选择多张图片，逐个验证、预览并统一提交，提升交互效率与用户体验。
1、在 input 标签中添加 multiple 属性：<input type="file" id="multiUpload" accept="image/*" multiple>
2、遍历 event.target.files 类数组，对每个 File 对象执行单独校验与预览逻辑。
3、将所有合法图片文件依次 append 到同一 FormData 实例中，键名可使用数组形式：formData.append("photos[]", file);
4、发送请求时，后端需按数组方式接收多个同名字段。
