HTML5图片上传预览功能（PC与手机适配）

HTML5 的图片上传预览功能，适配 PC 和手机的还挺实用，尤其是做用户头像、商品图上传那类需求。你只需要用一个标签，再配合 FileReader 读取图片内容，几行代码就能搞定预览。PC 上点选图片，手机上用相册或拍照都能用，体验还蛮顺的。

FileReader这玩意儿挺好用，能把你选的图片转成一个 base64 的链接，直接塞进里就能看到效果。不需要后端配合，完全前端搞定，调试也方便。

操作方式也不复杂，监听的change事件，拿到文件后用reader.readAsDataURL，再把event.target.result扔到的src里，预览图就出来了。

要兼容各种设备，响应式样式是必须的，@media搞一搞就行；触屏设备要注意touch事件的；方向变化别忘了监听orientationchange或者用flex让布局自适应。

浏览器兼容也要顺手查一下。大部分现代浏览器都支持 File API，老版本就得降级了，比如提示用户换浏览器，或者考虑其他方案。

如果你正好在做图像上传、头像裁剪这类功能，这套写法还挺适合拿去复用的。下面这几个例子你可以看看：

• HTML5 上传图片预览
• html5 多图片上传预览
• JavaScript html5 利用 FileReader 实现上传功能
• JS HTML5 拖拽上传图片预览

如果你打算做点更复杂的交互，比如裁剪、滤镜、上传前压缩，也可以在这个基础上继续扩展，灵活性还挺高。