用 html5 FileReader 读取本地图片和文本文件

最新推荐文章于 2025-03-20 14:29:14 发布

_being_

最新推荐文章于 2025-03-20 14:29:14 发布

阅读量7.5k

点赞数 1

文章标签： html5 FileReader

本文链接：https://blog.youkuaiyun.com/hui1yuan/article/details/53159382

版权

本文展示了如何使用HTML5的FileReader API来预览本地的图片和文本文件。通过创建输入文件元素和FileReader对象，可以读取文件内容并将其显示在页面上，包括将图片转换为data URL以及读取文本文件内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>预览本地文件</title>
</head>
<body>
<!--预览本地图片-->
<input type="file" οnchange="previewText()" >
<img src="" height="200">
<div id="result"></div>

<script>
    //预览图片
    function previewImage() {
        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); //64为编码
        } else {
            preview.src = "";
        }
    }
    //预览文字
    function previewText() {
        var preview = document.querySelector('#result');
        var file = document.querySelector('input[type=file]').files[0];
        var reader = new FileReader();
        reader.onloadend = function() {
            preview.innerHTML = reader.result;
        };
        if (file) {
            reader.readAsText(file, "gbk");  //csv txt
        }
    }

</script>
</body>
</html>