把上传的文件(图片)在本地查看

最新推荐文章于 2024-08-26 20:25:07 发布

小墨蛇

最新推荐文章于 2024-08-26 20:25:07 发布

阅读量111

点赞数

分类专栏：前端htmlcss 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weiyi47/article/details/131819303

版权

前端htmlcss 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

流程:
1.获取上传文件
2.创建一个文件读取对象
3.把文件给文件读取对象生成url
4.把url赋值给图片等

<!DOCTYPE html>
<html>
<head>
    <title>文件上传</title>
    <style>
        /* 样式化上传区域 */
        #upload-area {
            border: 2px dashed #ccc;
            padding: 20px;
            text-align: center;
        }
        #preview-image {
            max-width: 300px;
        }
    </style>
</head>
<body>
    <div id="upload-area">
        <input type="file" id="file-input" />
        <br />
        <img id="preview-image" />
    </div>

    <script>
        // 文件选择后预览功能
        const fileInput = document.getElementById('file-input');
        const previewImage = document.getElementById('preview-image');

        fileInput.addEventListener('change', function() {
            const file = fileInput.files[0];
            const reader = new FileReader();

            reader.onload = function(e) {
                previewImage.src = e.target.result;
            
            }

            reader.readAsDataURL(file);
        });
    </script>
</body>
</html>