HTML5-04.新增API-文件读取

最新推荐文章于 2024-01-16 14:36:00 发布

屋顶上的小喵

最新推荐文章于 2024-01-16 14:36:00 发布

阅读量369

点赞数

文章标签： html5

本文链接：https://blog.csdn.net/vivian_1122/article/details/88673038

版权

HTML5 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

通过FileReader 对象我们可以读取本地存储的文件，使用File 对象来指定所要读取的文件或数据；

其中File 对象可以是来自用户在一个元素上，选择文件后返回 FileList 对象，也可以来自由拖放

操作生成的DataTransfer;

Files 对象

由于HTML5中我们可以通过为表单元素添加 multiple 属性；

因此我们通过<input>上传文件后得到的是一个Files对象（伪数组形式）；

FileReader对象

HTML5新增内置对象，可以读取本地文件内容；

var reader = new FileReader,可以实例化一个对象

实例方法

1.readAsDataURL() 以DataURL形式读取文件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>文件读取-缩略图</title>
</head>

<body>
    <!-- multiple 可以进行多选 -->
    <input type="file" multiple>
    <img src="" alt="" width="100">
    <script>
        //我们想可以把上传的文件，内容显示到页面，或者是上传完毕的图片显示缩略图到页面上...
        //1.上传我们的文件，借助于 文件域 input file
        var file = document.querySelector('input');
        var img = document.querySelector('img');
        file.onchange = function() {
            //onchange 当发生改变的时候，下拉菜单，select 也是这个事件
            console.log(file.files) //可以是一个文件，也可以是很多文件

            //2. 选择我们要的文件，进行读取 fileReader
            var reader = new FileReader();
            // reader.readAsDataURL(文件对象)读取文件里面的内容
            reader.readAsDataURL(this.files[0]);
            //当这个文件的内容读取完毕之后，会存放到result中去；

            //3. 把读取的内容显示到页面中...
            //reader 已经读取完毕，而且读取的内容 存放到了 result 里面了
            reader.onload = function() {
                //把生成内容，赋值给图片的src
                img.src = this.result;
            }

        }
    </script>
</body>

</html>

2.readAsText() 读取文件里面的内容

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>文件读取</title>
</head>

<body>
    <!-- multiple 可以进行多选 -->
    <input type="file" multiple>
    <div></div>
    <script>
        //我们想可以把上传的文件，内容显示到页面，或者是上传完毕的图片显示缩略图到页面上...
        //1.上传我们的文件，借助于 文件域 input file
        var file = document.querySelector('input');
        var div = document.querySelector('div');
        file.onchange = function() {
            //onchange 当发生改变的时候，下拉菜单，select 也是这个事件
            console.log(file.files) //可以是一个文件，也可以是很多文件

            //2. 选择我们要的文件，进行读取 fileReader
            var reader = new FileReader();
            // reader.readAsText(文件对象)读取文件里面的内容
            reader.readAsText(this.files[0]);
            //当这个文件的内容读取完毕之后，会存放到result中去；
            
            //3. 把读取的内容显示到页面中...
            //reader 已经读取完毕，而且读取的内容 存放到了 result 里面了
            reader.onload = function() {
                div.innerHTML = this.result;
            }

        }
    </script>
</body>

</html>

事件监听

onload 当文件读取完成时调用

属性

result 读取的内容放到了result中