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

最新推荐文章于 2024-02-17 08:06:13 发布

VIP文章 _being_

最新推荐文章于 2024-02-17 08:06:13 发布

阅读量7.4k

点赞数 1

文章标签： html5 FileReader

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

版权

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

最低0.47元/天解锁文章

优惠劵

_being_

关注关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
用 html5 FileReader 读取本地图片和文本文件

预览本地文件 //预览图片 function previewImage() { var preview = document.querySelector('img'); var file = document.querySelector('input[type=file]').files[0]; var reader
复制链接

扫一扫