一个简单的图片上传预览demo

王大强~

于 2017-10-16 15:51:09 发布

阅读量2.2k

点赞数

分类专栏： JavaScript-篇

本文链接：https://blog.youkuaiyun.com/angularWQ/article/details/78250581

版权

JavaScript-篇专栏收录该内容

46 篇文章

订阅专栏

<html>
<head>
    <meta content="text/html" />
    <title>图片预览</title>
    <script language=javascript>
        function previewFile() {
            var preview = document.querySelector('img');
            var file  = document.querySelector('input[type=file]').files[0];
            var reader = new FileReader();
            reader.onloadend = function () {
                preview.src = reader.result;
            }
            if (file) {
                reader.readAsDataURL(file);
            } else {
                preview.src = "";
            }
        }
    </script>
</head>
<body>
    <input type="file" οnchange="previewFile()"><br>
    <img src="" height="400" width="600" alt="未选择图片"/>
</body>
</html>