js 图片预览小技巧

最新推荐文章于 2024-09-14 18:52:56 发布

wyz0228

最新推荐文章于 2024-09-14 18:52:56 发布

阅读量299

点赞数 1

分类专栏： js-实用小技巧文章标签：解决方案图片 javascript

本文链接：https://blog.csdn.net/wyz0228/article/details/56831153

版权

js-实用小技巧专栏收录该内容

2 篇文章 0 订阅

订阅专栏

图片预览这个功能其实是很常用的。。那么之前有看过一种解决方案。

图片点击上传到服务器。服务器返回图片路径页面再进行展示（感觉不好。。这样每次选择图片都会进行服务器资源的浪费），下边用js 来实现这个功能
简单的实用了js 的文件流：实用又简单
<html>
    <head>
        <title>测试</title>
    </head>
    <script type="text/javascript">
        function showImg(source) {
            var file = source.files[0];
            if(window.FileReader) {
                var fr = new FileReader();
                fr.onloadend = function(e) {
                    document.getElementById("photo").src = e.target.result;
                };
                fr.readAsDataURL(file);
            }
        }
    </script>

    <body>
        <input type="file" name="file" onchange="showImg(this)" />
        <img id="photo" src="" width="100" height="100">
    </body>

</html>