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

前端之家收集整理的这篇文章主要介绍了通过 html5 FileReader 实现上传图片预览功能前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

下面是编程之家 jb51.cc 通过网络收集整理的代码片段。

编程之家小编现在分享给大家,也给大家做个参考。

@H_301_5@<!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>
<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>

以上是编程之家(jb51.cc)为你收集整理的全部代码内容,希望文章能够帮你解决所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

猜你在找的HTML相关文章