使用input[type=file]选择图片，通过FileReader读取文件并预览；2. 将文件转为base64显示在img标签中；3. 用FormData和fetch将文件上传至服务器；4. 可添加文件校验、多图上传和样式优化提升体验。
要在HTML5中实现图片上传并预览，主要依赖于FileReader API 和 input[type=file] 元素。用户选择图片后，通过JavaScript读取文件内容，并在页面上即时显示缩略图，随后可将图片上传至服务器。
1. HTML结构：选择图片文件
使用一个文件输入框让用户选择图片，再准备一个标签用于显示预览：
@@##@@
说明：accept="image/*"限制只允许选择图片文件，提升用户体验。
2. JavaScript实现图片预览
监听文件选择事件，使用FileReader读取文件数据并设置为图片的src：
立即学习“前端免费学习笔记（深入）”；
网趣网上购物系统旗舰版
下载
网趣网上购物系统支持PC电脑版+手机版+APP，数据一站式更新，支持微信支付与支付宝支付接口，是专业的网上商城系统，网趣商城系统支持淘宝数据包导入，实现与淘宝同步更新!支持上传图片水印设置、图片批量上传功能，同时支持订单二次编辑以及多级分类隐藏等实用功能，新版增加商品大图浏览与列表显示功能，使分类浏览更方便，支持最新的支付宝即时到帐接口。
document.getElementById('imageUpload').addEventListener('change', function(e) {
const file = e.target.files[0];
if (!file) return;
const reader = new FileReader();
reader.onload = function(event) {
document.getElementById('imagePreview').src = event.target.result;
};
reader.readAsDataURL(file);
});
关键点：readAsDataURL将文件转为base64字符串，可直接作为图片的src显示。
3. 上传图片到服务器
预览完成后，可通过FormData将文件发送到后端：
function uploadImage() {
const fileInput = document.getElementById('imageUpload');
const file = fileInput.files[0];
if (!file) {
alert("请先选择图片");
return;
}
const formData = new FormData();
formData.append('upload_file', file);
fetch('/upload', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => {
alert("上传成功");
console.log(data);
})
.catch(err => {
alert("上传失败");
console.error(err);
});
}
注意：后端需配置接收名为upload_file的文件字段，并处理文件存储。
4. 增强体验的小技巧
- 添加校验：检查文件类型或大小，避免过大或非图片文件
- 支持多图：添加
multiple属性，配合循环处理多个文件 - 错误处理：当文件为空或读取失败时给出提示
- 样式优化：用CSS美化预览区域，如加边框、阴影等
基本上就这些。HTML5让图片预览和上传变得简单直观，结合现代浏览器API，无需插件即可完成流畅的交互体验。
