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

最新推荐文章于 2024-09-07 16:16:56 发布

_being_

最新推荐文章于 2024-09-07 16:16:56 发布

阅读量7.4k

点赞数 1

文章标签： html5 FileReader

本文链接：https://blog.csdn.net/hui1yuan/article/details/53159382

版权

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

摘要由CSDN通过智能技术生成

<!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