欢迎访问 生活随笔!

生活随笔

当前位置: 首页 > 编程资源 > 编程问答 >内容正文

编程问答

通过 html5 FileReader 实现上传图片预览功能

发布时间:2025/3/17 编程问答 38 豆豆
生活随笔 收集整理的这篇文章主要介绍了 通过 html5 FileReader 实现上传图片预览功能 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

为什么80%的码农都做不了架构师?>>>   

Html 部分

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title></head><body><input type="file" name="file" onchange="showPreview(this)" /><img id="portrait" src="" width="70" height="75"></body></html>


JS部分

<script type="text/javascript">function showPreview(source) {var file = source.files[0];if (window.FileReader) {var fr = new FileReader();fr.onloadend = function(e) {document.getElementById("portrait").src = e.target.result;};fr.readAsDataURL(file);}} </script>




转载于:https://my.oschina.net/furw/blog/493920

总结

以上是生活随笔为你收集整理的通过 html5 FileReader 实现上传图片预览功能的全部内容,希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错,欢迎将生活随笔推荐给好友。