JavaScript头像上传与图片预览功能实现
点击头像弹出文件选择窗口，上传后还能直接预览，还能显示文件名、大小和类型，挺方便的。适合做用户资料页的头像上传功能，界面交互也比较直观。
点击头像弹出文件选择窗口，上传后还能直接预览，还能显示文件名、大小和类型，挺方便的。适合做用户资料页的头像上传功能，界面交互也比较直观。
图片预览这块用了浏览器原生的 URL.createObjectURL，不用额外引入插件，轻量还实用。
比如你上传了一张头像，页面会马上显示出来，而且还能看到文件名，比如 avatar.png，大小单位是 KB，格式像 image/png 这样。对用户来说，反馈清晰。
如果你还想做类型或大小校验，可以配合 JavaScript 的 file.type 和 file.size 属性来搞定。别忘了加个判断，比如限制只能上传 image/jpeg 或 image/png。
哦对了，如果你后端用 PHP，也可以看下 PHP 上传文件类型与大小限制配置，两个配合起来效果更稳。
另外像文件名提取、拖拽上传等拓展功能，也有不少资料参考，感兴趣的可以看看：
如果你做的项目对用户体验要求比较高，推荐你加上这个上传预览的功能，体验真的会加分不少～
文件大小：2.42KB
评论区