HTML5图片上传有五种方式：一、表单直接提交；二、FormData+XMLHttpRequest异步上传；三、FormData+fetch上传；四、前端校验格式与大小；五、FileReader预览图片。
如果您希望在网页中实现图片上传功能，HTML5 提供了原生的 <input type="file"> 元素和 FormData 接口，可直接与 JavaScript 配合完成客户端图片选择与服务器端提交。以下是几种可行的上传实现方式：
一、使用 input type="file" 直接提交表单
该方法依赖传统表单提交机制，无需额外 JavaScript，适合简单场景且服务端能直接处理 multipart/form-data 请求。
1、在 HTML 中添加带有 accept="image/*" 属性的文件输入控件，并设置 name="image" 以便后端识别字段名。
2、将该 <input> 放入 <form> 标签内，设置 method="POST" 和 enctype="multipart/form-data"。
立即学习“前端免费学习笔记（深入）”；
3、为表单添加提交按钮，用户选择图片后点击即可发送至 action 指定的 URL。
二、使用 input type="file" + FormData + XMLHttpRequest 上传
该方法通过 JavaScript 拦截文件选择，构造 FormData 对象并用 XMLHttpRequest 异步提交，支持进度监听与错误处理。
1、为 <input type="file"> 绑定 change 事件，获取 event.target.files[0] 得到选中的图片文件对象。
2、创建新的 FormData 实例，调用 append("image", file) 将文件添加进去，键名需与后端约定一致。
3、新建 XMLHttpRequest 实例，调用 open("POST", "/upload")，然后使用 send(formData) 发送请求。
三、使用 input type="file" + FormData + fetch API 上传
该方法采用现代 Promise 风格的 fetch 替代 XMLHttpRequest，代码更简洁，且自动处理部分头部设置。
1、监听 <input type="file"> 的 change 事件，从 event.target.files 中提取图片文件。
2、新建 FormData 对象，执行 formData.append("image", file)，确保键名与后端接收字段匹配。
3、调用 fetch("/upload", { method: "POST", body: formData }) 发起上传请求；注意不可手动设置 Content-Type 头，否则浏览器无法自动注入 boundary。
四、限制上传图片格式与大小
在前端加入基础校验可减少无效请求，提升用户体验，但不能替代服务端验证。
1、为 <input type="file"> 添加 accept="image/jpeg,image/png,image/gif" 属性，限制可选文件类型。
2、在 change 事件处理器中读取 file.size，与预设阈值（如 5 * 1024 * 1024 表示 5MB）比较，若超限则提示用户并 阻止后续上传流程。
3、检查 file.type 是否属于允许的 MIME 类型列表，若不匹配则显示错误信息并终止操作。
五、预览所选图片（客户端即时显示）
利用 FileReader API 可在上传前将图片渲染到页面上，帮助用户确认选择内容。
1、在 <input type="file"> 的 change 事件中，获取 file 对象后新建 FileReader 实例。
2、为 FileReader 绑定 load 事件，在事件回调中将 reader.result（即 data URL）赋值给 <img> 元素的 src 属性。
3、调用 reader.readAsDataURL(file) 启动读取过程，触发预览更新。
