HTML5图片上传实现方法详解

3、为表单添加提交按钮，用户选择图片后点击即可发送至 action 指定的 URL。

二、使用 input type="file" + FormData + XMLHttpRequest 上传

该方法通过 JavaScript 拦截文件选择，构造 FormData 对象并用 XMLHttpRequest 异步提交，支持进度监听与错误处理。

1、为 绑定 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、监听 的 change 事件，从 event.target.files 中提取图片文件。

2、新建 FormData 对象，执行 formData.append("image", file)，确保键名与后端接收字段匹配。

3、调用 fetch("/upload", { method: "POST", body: formData }) 发起上传请求；注意不可手动设置 Content-Type 头，否则浏览器无法自动注入 boundary。

四、限制上传图片格式与大小

在前端加入基础校验可减少无效请求，提升用户体验，但不能替代服务端验证。

1、为 添加 accept="image/jpeg,image/png,image/gif" 属性，限制可选文件类型。

2、在 change 事件处理器中读取 file.size，与预设阈值（如 5 * 1024 * 1024 表示 5MB）比较，若超限则提示用户并 阻止后续上传流程。

3、检查 file.type 是否属于允许的 MIME 类型列表，若不匹配则显示错误信息并终止操作。

五、预览所选图片（客户端即时显示）

利用 FileReader API 可在上传前将图片渲染到页面上，帮助用户确认选择内容。

1、在 的 change 事件中，获取 file 对象后新建 FileReader 实例。

2、为 FileReader 绑定 load 事件，在事件回调中将 reader.result（即 data URL）赋值给 元素的 src 属性。

3、调用 reader.readAsDataURL(file) 启动读取过程，触发预览更新。

到这里，我们也就讲完了《HTML5图片上传实现方法详解》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！