[学习交流] 【太原校区】使用JavaScript读取本地文件

1.1文件读取
通过FileReader对象可以读取本地存储的文件，使用?File?对象来指定所要读取的文件或数据。
File对象可以是来自用户在一个?<input type="file">?元素上选择文件后返回的FileList?对象，也可以来自由拖放操作生成的??DataTransfer。
1.1.1FileList对象

HTML5中通过为表单元素添加multiple属性实现文件多选，因此通过<input type="file">上传文件后得到的FileList对象是以伪数组形式存在。
1.1.2FileReader对象

HTML5新增内建对象，用以读取本地文件。
属性：result文件读取的结果
事件：onload文件读取结束
方法：readAsDataURL()、readAsText()

[HTML] 纯文本查看 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>filereader</title>
</head>
<body>
    <input type="file">
    <script>
        
        var input = document.querySelector('input');

        input.onchange = function() {
            var files = this.files;

            // FileReader;

            var reader = new FileReader;

            // for(var key in reader) {
            //  console.log(key, reader[key]);
            // }

            // 传递将要读取文件对象File
            reader.readAsText(files[0]);

            // 通过事件监听读取完成
            reader.onload = function () {
                console.log(reader.result);

                var style = document.createElement('style');

                style.innerHTML = reader.result;

                document.querySelector('head').appendChild(style);
            }

        }
    </script>
</body>

帐号		自动登录	找回密码
密码			加入黑马

[学习交流] 【太原校区】使用JavaScript读取本地文件

0 个回复