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

图片预览功能实现

原创于 2017-10-16 15:51:09 发布 · 2.2k 阅读

0 ·

CC 4.0 BY-SA版权

JavaScript-篇专栏收录该内容

46 篇文章

订阅专栏

本文介绍了一种使用HTML和JavaScript实现的图片预览功能。通过简单的文件输入元素和JavaScript函数，可以实现在用户选择图片后立即预览所选图片的效果。此功能适用于需要上传图片的应用场景。

<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" onchange="previewFile()"><br>
    <img src="" height="400" width="600" alt="未选择图片"/>
</body>
</html>