原生JavaScript实现点击图片在新页面预览

最新推荐文章于 2024-05-26 12:42:56 发布

weixin_44953227

最新推荐文章于 2024-05-26 12:42:56 发布

阅读量2.3k

点赞数 2

分类专栏： JavaScript 文章标签： js

本文链接：https://blog.csdn.net/weixin_44953227/article/details/118187712

版权

JavaScript 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

效果图

在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .uploadBox {
        margin: 0px auto;
        padding: 4px;
        cursor: pointer;
        line-height: 20;
        width: 80%;
        height: 300px;
        background-color: rgb(241, 243, 244);
        text-align: center;
    }
</style>
<body>
    <div >
        <div style="width: 800px; margin: 30px auto;">
            <input
                id="fileImg"
                accept=".png,.jpg,.jpeg"
                onChange="handleChange()"
                type="file"
            />

            <button onclick="handlePreview(previewSrc)">预览</button>
            <div class="uploadBox" onclick="handlePreview(previewSrc)">
                <img id="imgSign" width="100%" height="100%" style="display: none;" />
            </div>
        </div>
    </div>

    <script>
        var previewSrc = null;

        // 获取文件
        async function handleChange() {
            const file = document.getElementById("fileImg").files[0];
            if (file) {
                previewSrc = await new Promise((resolve, reject) => {
                    const fileReader = new FileReader();
                    fileReader.readAsDataURL(file);
                    fileReader.onload = () => resolve(fileReader.result);
                    fileReader.onerror = err => reject(err);
                });
                const img = document.getElementById("imgSign");
                img.src = previewSrc;
                img.style.display = "block";
            }
        };

        // 预览
        function handlePreview(val) {
            if (val) {
                const image = new Image();
                image.src = val;
                const imgWindow = window.open(val);
                imgWindow.document.write(image.outerHTML);
            }
        };
    </script>
</body>
</html>

weixin_44953227

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
原生JavaScript实现点击图片在新页面预览

效果图代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <titl
复制链接

扫一扫