Web前端开发学习之路——数据的保存与读取（三）

最新推荐文章于 2024-03-01 20:13:50 发布

宇直豪

最新推荐文章于 2024-03-01 20:13:50 发布

阅读量716

点赞数 1

分类专栏：前端开发文章标签：前端开发

本文链接：https://blog.csdn.net/CSDN_XUWENHAO/article/details/88825347

版权

前端开发专栏收录该内容

15 篇文章 1 订阅

订阅专栏

读取文本文件

HTML5搭配JavaScript就可以轻松读取文件的内容，并显示文件属性（例如大小、文件类型、创建日期）经常读取的文件是文本文件，下面将以读取文本文件来说明读取文件的方法。

选择文件

选择文件最简单的方式就是使用Input元素，只要将input元素的type属性指定为file，就能够轻轻松松地选择文件。语法如下：

<input type ="file" name = "file_name">

Input的file组件有两个属性可供设置：一个是accept，另一个是multiple

accept属性：指定文件类型，也就是file字段可接受的附件，常用语法如下：

accept属性
语法	说明
accept="video/*"	只能选择影片文件
accept="audio/*"	只能选择音频文件
accept="text/*"	只能选择文本文件
accept="application/pdf"	只能选择

如果支持多种文件类型，也可以用逗号隔开，例如accept="audio/*,video/*,image/*"。

multiple属性：可以让用户在文件的对话框中选择一个以上的文件

Input的file组件绑定change事件，并设置匿名函数接收返回的File对象。当一次选择多个对象时返回的就是一个Filelist对象，结构上类似于数组，可以使用length属性获取文件个数，也可以用item[n]方法获得表中的第n个文件，语法如下所示

$("input:file").on("change",function(event){
    for(var i =0;i<event.target.files.length;i++){
    var file =event.target.files[i];
    ...
}
})

File对象可以通过size、type、name来取得文件信息。

name:取得文件名称
size:取得文件大小(bytes)
type:取得文件类型，当遇到无法识别的文件类型时会返回空白

下面时一个点击“选择文件”按钮后，显示文件名的范例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #outline {border:5px#666000 outset;padding: 10px;}
    </style>
    <script src="../jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("input:file").on('change',function (event) {
                for(var i=0;i<event.target.files.length;i++)
                {
                    var file =event.target.files[i];
                    $('#message').append(file.name+"<br>");
                }
            })
        })
    </script>
</head>
<body>
<div id="outline">
    <h1>选择文件</h1>
    <input type="file" accept="image/*" multiple/> <!--multiple可以一次选择多个文件-->
    <div id="message"></div>
</div>
</body>
</html>

执行结果如下：

读取文件

File对象只能取得文件信息，并不能读取文件内容，想要读取文件内容，就必须使用FileReader，创建FileReader对象的语法如下：

var r = new FileReader();

事件处理器
事件	说明
FileReader.onabort	使用abort()中断读取操作时触发
FileReader.onerror	读取操作失败时触发
FileReader.onload	读取操作成功时触发
FileReader.onloadstart	读取操作开始时触发
FileReader.onloadend	读取操作结束时触发
FileReader.onprogress	读取内容时触发

读取文件时，有以下3种属性可供使用

FileReader.error:返回错误代码
FileReader.readyState:返回文件读取状态（0：FileReader对象刚创建尚未读入数据）、（1：数据正确读入）、（2：读取操作结束，此使才会返回成功、失败或终止）
FileReader.result:根据文件读取方式返回处理结果，读取方法有以下4种（readAsText:以文字方式读取内容，默认的编码是utf-8）、（readAsDataURL:将读取内容，以Data URL编码）、（readAsArrayBuffer:以ArrayBuffer数据类型的二进制格式读取）、（readAsBinaryString:以二进制格式读取）

程序结构如下：

$("input:file").on('change',function(event){
    var file = event.target.files[0];//获取file对象
    if(file){
    var r = new FileReader(); //创建FileReader对象
    r.onload = function(e){
    var contents = e.target.result;//获取文件内容
    ...
    }
    r.readAsDataURL(file);    //指定文件读取方式
    }else{
    alert("选择文件失败");
    }
});

请看下面的范例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../jquery-3.3.1.min.js"></script>
    <style>
        #outline {border:5px #666000 outset;
            padding: 0px;}
    </style>
    <script type="text/javascript">
        $(function () {
            $("input:file").on('change',function (event) {
                $('#fileContentList').empty();
                for (var i =0;i<event.target.files.length;i++){
                    var file = event.target.files[i];
                    if(file){
                        var r  = new FileReader();
                        r.file = file;
                        r.readAsDataURL(file);
                        r.onload = function (e) {
                            var contents = e.target.result;
                            var thisfile = this.file;
                            $('#fileContentList').append("文件名："+thisfile.name+"<br>文件类型："+
                            thisfile.type+"<br>文件大小："+thisfile.size+"bytes<br><img src='"+contents+"'><br>");
                        }
                    }else
                    {
                        alert("选择文件失败");
                    }
                }
            })
        })
    </script>
</head>
<body>
<div id ="outline">
    <h1>选择文件</h1>
    <input type="file" multiple="multiple" accept="image/*"/>
    <div id="fileContentList"></div>
</div>
</body>
</html>

执行结果如下：

宇直豪

关注

1
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
Web前端开发学习之路——数据的保存与读取（三）

读取文本文件HTML5搭配JavaScript就可以轻松读取文件的内容，并显示文件属性（例如大小、文件类型、创建日期）经常读取的文件是文本文件，下面将以读取文本文件来说明读取文件的方法。选择文件选择文件最简单的方式就是使用Input元素，只要将input元素的type属性指定为file，就能够轻轻松松地选择文件。语法如下：<input type ="file" name =...
复制链接

扫一扫

专栏目录