通过 html5 FileReader 实现上传图片预览功能
生活随笔
收集整理的这篇文章主要介绍了
通过 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 实现上传图片预览功能的全部内容,希望文章能够帮你解决所遇到的问题。
- 上一篇: Linux服务器配置秘钥对连接
- 下一篇: ActiveMQ BrokeUrl的配置