怎么上传图片html5_html5用FormData或input file上传图片到服务器【上传】

可通过HTML5的FormData与file输入框结合XMLHttpRequest或fetch实现图片上传：一、XMLHttpRequest方式需创建FormData并手动配置xhr；二、fetch方式以Promise风格简化异步流程；三、启用multiple属性可批量上传；四、配合FileReader可实现本地预览。

如果您希望在网页中通过 HTML5 技术将图片文件上传至服务器，则需要结合 FormData 对象与 元素实现客户端文件收集，并通过 XMLHttpRequest 或 fetch API 发送至后端。以下是几种可行的上传方式：

一、使用 XMLHttpRequest + FormData 上传图片

该方法利用原生 XMLHttpRequest 对象发送包含二进制文件的 FormData，兼容性较好，适用于需精细控制请求过程的场景。

1、在 HTML 中添加文件选择控件：。

2、监听 change 事件，获取用户选中的 File 对象：const file = document.getElementById('imageInput').files[0];。

立即学习“前端免费学习笔记（深入）”；

3、创建 FormData 实例并追加文件：const formData = new FormData(); formData.append('image', file);。

4、初始化 XMLHttpRequest 并设置请求地址与方法：const xhr = new XMLHttpRequest(); xhr.open('POST', '/upload');。

5、绑定上传完成回调，发送 FormData：xhr.onload = () => { if (xhr.status === 200) console.log('上传成功'); }; xhr.send(formData);。

二、使用 fetch API + FormData 上传图片

fetch 提供更简洁的 Promise 风格接口，无需手动管理状态码回调，适合现代浏览器环境下的异步上传流程。

1、确保页面中存在 元素。

2、获取用户选择的图片文件：const file = document.getElementById('fileInput').files[0];。

3、构造 FormData 并添加文件字段：const formData = new FormData(); formData.append('photo', file);。

4、调用 fetch 发起 POST 请求，直接传入 FormData：fetch('/api/upload', { method: 'POST', body: formData })。

5、处理响应结果：.then(res => res.json()).then(data => console.log(data));。

三、使用 input file 的 multiple 属性批量上传多张图片

当需支持一次选择并上传多张图片时，可在 input 标签中启用 multiple 属性，配合 FormData 的多次 append 实现批量提交。

1、HTML 中设置允许多选：。

2、读取所有选中文件：const files = document.getElementById('multiImageInput').files;。

3、遍历 files 类数组对象，逐个添加进 FormData：for (let i = 0; i 。

4、后端需能接收名为 images 的多个文件字段（如 Express 中使用 multer 的 array 方法）。

5、发起请求时仍使用 fetch 或 XMLHttpRequest，body 为该 FormData 实例。

四、预览所选图片（前端即时显示）

在上传前提供图片预览功能，可提升用户体验，依赖 FileReader API 将本地文件转为 Data URL 后赋值给 img 元素。

1、为 input 添加 change 监听器：document.getElementById('previewInput').addEventListener('change', handlePreview);。

2、在 handler 中获取第一个文件：const file = e.target.files[0];。

3、创建 FileReader 实例并读取为 data URL：const reader = new FileReader(); reader.readAsDataURL(file);。

4、绑定 onload 回调，将结果设为预览图的 src：reader.onload = () => { document.getElementById('previewImg').src = reader.result; };。

5、HTML 中需预留预览区域：。

以上就是怎么上传图片html5_html5用FormData或input file上传图片到服务器【上传】的详细内容，更多请关注php中文网其它相关文章！