最新HTML5中的文件详解

已于 2024-09-07 10:43:11 修改
阅读量578 收藏 12
点赞数 15
分类专栏： HTML实战 文章标签： html5 前端 html
于 2024-09-07 10:36:26 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36324341/article/details/141991922
版权

第5章 HTML5中的文件

5.1选择文件

可以创建一个file类型的input,添加multiple属性为true,可以实现多个文件上传。

5.1.1 选择单个文件

1.功能描述

创建file类型input元素，页面中不再有文本框，而是 选择文件 按钮，右侧是上次文件的名称，

初始化时没有上传文件，只显示未选择文件字样，可以选择一个图片文件。

2.实现代码
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <form id="frmTmp" action="#">
        <fieldset>
            <legend>上传单个文件：</legend>
            <input type="file" name="feUpload" id="feUpload" />
        </fieldset>
    </form>
</body>
</html>
3.页面效果

4.源码分析

本例中，单击选择文件后，没编写JS代码，就可以选择文件名称。

5.1.2 选择多个文件

1.功能描述

创建file类型input，添加multiple属性为true,单击选择文件，同时选择3个文件，点击打开按钮后，在按钮右侧会显示这个三个文件的字样，移动鼠标至文字上，显示详细名称和类型。

2.实现代码
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <form id="frmTmp" action="#">
        <fieldset>
            <legend>上传多个文件：</legend>
            <input type="file" multiple="true" name="feUpload" id="feUpload" />
        </fieldset>
    </form>
</body>
</html>
4.源码分析

选择文件后，不在显示文件名称，而是显示成功选择文件的数量，鼠标浮动上面显示全部上传文件详细列表。

5.1.3 使用Blob接口获取文件的类型和大小

Blob(Binary Large Object二进制大对象),表示二进制数据块，Blob接口提供slice方法，可以访问指定长度和类型的字节内部数据块。接口有两个属性，size表示返回的数据块大小，type表示数据块的MIME类型。

1.功能描述

file类型的input元素，multiple属性设为true，选择文件按钮，选取多个文件，页面将以列表的形式展示所选文件名称，类型，大小信息。

2.实现代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script>
            function $$(id){
                return document.getElementById(id);
            }
            function getFileList(files){
                var strLi = "<li class='li'>";
                strLi=strLi + "<sapn>文件名称</span>,";
                strLi=strLi + "<sapn>文件类型</span>,";
                strLi=strLi + "<sapn>文件大小</span>";
                strLi=strLi + "</li>";
                for(var i=0;i<files.length;i++){
                    var tmpFile = files[i]
                    strLi=strLi+"<li>";
                    strLi=strLi + "<sapn>"+tmpFile.name+"</span>,";
                    strLi=strLi + "<sapn>"+tmpFile.type+"</span>,";
                    strLi=strLi + "<sapn>"+tmpFile.size+"KB</span>";
                    strLi=strLi + "</li>";
                }
                $$("ulUpload").innerHTML = strLi;
            }
        </script>
    </head>
    <body>
        <form id="frmTmp"  action="#">
            <fieldset>
                <legend>上传多个文件：</legend>
                <input type="file" onchange="getFileList(this.files)" 
                    multiple="true" name="feUpload" id="feUpload" />
                <ul id="ulUpload"></ul>
            </fieldset>
        </form>
    </body>
</html>
3.页面效果

4.源码分析

fie类型input选择上传时，触发onChange事件，调用自己定义的getFileList函数，实参是当前文件列表，获取单个文件，返回名称，类型，大小信息，并拼接到strLi中，赋值给ulUpload列表。

5.1.4 通过类型过滤选择文件

1.功能描述

选择多个文件，点击选择文件后，选取文件中存在不符合图片类型的文件，将在页面中显示总数量与文件名称。

2.实现代码
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script>
        function $$(id) {
            return document.getElementById(id);
        }
        function checkFileType(files) {
            var strP = "", strN = "", j = 0
            var strFileType = /image.*/;
            for (var i = 0; i < files.length; i++) {
                var tmpFile = files[i]
                if (!tmpFile.type.match(strFileType)) {
                    j = j + 1;
                    strN = strN + tmpFile.name + "<br>"
                }
            }
            strP = "检测到(" + j + ")个非图片格式文件.";
            if (j > 0) {
                strP = strP + "文件名如下：<p>" + strN + "</p>";
            }
            $$("pTip").innerHTML = strP;
        }
    </script>
</head>
<body>
    <form id="frmTmp" action="#">
        <fieldset>
            <legend>上传过滤类型后的文件：</legend>
            <input type="file" onchange="checkFileType(this.files)" multiple="true" name="feUpload" id="feUpload" />
            <p id="pTip"></p>
        </fieldset>
    </form>
</body>
</html>
3.页面效果

4.源码分析

以上代码中file对象返回的类型与image正则匹配，若不是图片，将内容保存在变量中，将变量内容显示给p段落。

5.1.5 通过accept属性过滤选择文件的类型

1.功能描述

表单中创建file类型input元素，并在元素中添加accept属性，属性值设为image/gif。

当用户单击选择文件按钮时，选择窗口中，文件类型为accept的值。

accept 属性支持的MIME类型包括但不限于：

  • ‌图片文件‌：image/jpeg、image/png、image/gif等。
  • ‌音频文件‌：audio/mp3、audio/wav等。
  • ‌视频文件‌：video/mp4等。
2.实现代码
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>通过accept属性过滤某类型上传文件</title>
</head>
<body>
    <form id="frmTmp" action="#">
        <fieldset>
            <legend>选择某类型上传文件：</legend>
            <input type="file" accept="image/png" name="feUpload" id="feUpload" />
        </fieldset>
    </form>
</body>
</html>
3.页面效果

4.源码分析

这种方法过滤所选文件类型简单方便，但是不是很有效，及时设置了，不是该类型的元素同样会被选中，也能被文件元素接受，最好的方式是js或者后端再一次进行验证 。

5.2 使用FileReader接口读取文件

使用Blob接口可以获取文件相关信息，如文件名称，大小，类型。

如果需要读取和浏览文件，则需要通过FileReader接口。

该接口不仅可以读取图片文件，还可以读取文本或二进制文件，根据接口提供的事件和方法动态侦查文件的详细状态。

5.2.1 FileReader接口的方法

FileReader提供异步API，可以从浏览器主线程中异步访问文件系统中数据。

读取文件中数据并存入内存中。

访问不同文件，有多个对象，常用方法：

方法名称

参数

功能描述

使用说明

readAsBinaryString()

file

以二进制方式读取文件内容

调用时，将file对象返回的数据块以二进制字符串形式分块读入内存中

readAsArrayBuffer()

file

以数组缓冲的方式读取

调用时，将file对象返回的字节数以数组缓冲的方式读入内存中

readAsDataURL()

file

以数据URL的方式读取

调用时，将file对象返回的数据块以一串数据URL字符形式展现在页面中，通常是较小的文件

readAsText()

file,encoding

以文本编码方式读取

调用时，以编码方式读取数据块按文本方式读入内存中，通常是UTF-8

abort()

无

读取数据中止时自动触发

如果读取过程中出现错误和异常触发该方法，返回错误信息

5.2.2 使用readAsDataURL方法预览图片

通过此方法可以获取API异步读取的文件数据，另存为数据URL,将URL绑定元素的src属性，可以说实现文件预览效果。

1.功能描述

表单中添加file类型的input元素，设置属性multiple为true,单击选择文件后如果选择图片文件，将在页面中显示。

2.实现代码
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>5.2.2 使用readAsDataURL方法预览图片</title>
    <style>
        * {
            list-style-type: none;
        }
    </style>
    <script>
        function $$(id) {
            return document.getElementById(id);
        }
        function prevImageFile(files) {
            //检测浏览器是否支持FileReader对象
            if (typeof FileSystem == undefined) {
                alert("检测到您的浏览器不支持FileReader对象！")
            }
            var strHTML = "";
            for (var i = 0; i < files.length; i++) {
                var tmpFile = files[i];
                var reader = new FileReader();
                reader.readAsDataURL(tmpFile);
                reader.onload = function (e) {
                    strHTML = strHTML + "<span>";
                    strHTML = strHTML + "<img width='60px' height='100px' style='margin:0 5px;' src='" + e.target.result + "'/>";
                    strHTML = strHTML + "</span>";
                    $$("ulUpload").innerHTML = "<li>" + strHTML + "</li>"
                }
            }
        }
    </script>
</head>

<body>
    <form id="frmTmp" action="#">
        <fieldset>
            <legend>预览图片文件：</legend>
            <input type="file" multiple="true" onchange="prevImageFile(this.files)" name="feUpload" id="feUpload" />
            <ul id="ulUpload"></ul>
        </fieldset>
    </form>
</body>

</html>
3.页面效果

4.源码分析

图片预览过程实质上是图片文件被读取后展示在页面中的过程，考虑到兼容性，先判断浏览器是否支持。

每个文件以URL方式读入页面中，读取成功触发onload事件，通过result属性过去url地址绑定给img元素，

最后通过ul的ID展示到页面中，实现预览效果。

5.2.3 使用readAsText方法读取文本文件

FileReader接口中的readAsText()方法可以将文件以文本编码的方式进行读取，可以读取文本文件的内容。

1.功能描述

表单中添加file类型的input元素，单击选择文件后如果选择文本文件，将在页面中显示文本文件的内容。

2.实现代码
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>使用fileReader方法读取文本文件</title>
    <script>
        function $$(id) {
            return document.getElementById(id);
        }
        function readTextFile(files) {
            //检测浏览器是否支持FileReader对象
            if (typeof FileSystem == undefined) {
                alert("检测到您的浏览器不支持FileReader对象！")
            }
            var tmpFile = files[0];
            var reader = new FileReader();
            reader.readAsText(tmpFile);
            reader.onload = function (e) {
                $$("artShow").innerHTML = "<pre>" + e.target.result + "</pre>";
            }
        }
    </script>
</head>

<body>
    <form id="frmTmp" action="#">
        <fieldset>
            <legend>读取文本文件：</legend>
            <input type="file" onchange="readTextFile(this.files)" name="feUpload" id="feUpload" />
            <article id="artShow"></article>
        </fieldset>
    </form>
</body>

</html>
3.页面效果

4.源码分析

先检测浏览器是否支持FileReader对象，创建一个对象，调用readAsText()方法，

以文本的编码方式读入页面，通过result获取读入的内容，并赋给artShow元素，

同时显示在页面中。

5.2.4 侦听FileReader接口中的事件

FIleReader提供很多常用的事件，可以清晰侦听对象读取文件详细过程(生命周期)，常用事件如下：

  • onloadstart 当读取数据开始时触发
  • onprogress 正在读取时触发
  • onabort 读取中止时触发
  • onerror 读取失败时触发
  • onload 读取成功时触发
  • onloadend 请求成功后，无论读取结果如何都触发

正常读取触发的先后顺序：onloadstart-onprogress-onload-onloadend

想要正确获取文件数据，必须在onload中编写代码。

1.功能描述

file类型input点击选择文件选取文件，页面将展示读取文件过程所触发事件的内容。

2.实现代码
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>展示文件读取时触发事件的先后顺序</title>
    <script>
        function $$(id) {
            return document.getElementById(id);
        }
        function showEvent(files) {
            //检测浏览器是否支持FileReader对象
            if (typeof FileSystem == undefined) {
                alert("检测到您的浏览器不支持FileReader对象！")
            }
            var tmpFile = files[0];
            var reader = new FileReader();
            reader.readAsText(tmpFile);
            reader.onload = function (e) {
                var newLi = document.createElement('li');
                newLi.textContent = "数据读取成功！";
                $$("olStatus").appendChild(newLi)
            }
            reader.onloadstart = function (e) {
                var newLi = document.createElement('li');
                newLi.textContent = "开始读取数据。。。";
                $$("olStatus").appendChild(newLi)
            }
            reader.onloadend = function (e) {
                var newLi = document.createElement('li');
                newLi.textContent = "文件读取成功";
                $$("olStatus").appendChild(newLi)
            }
            reader.onprogress = function (e) {
                var newLi = document.createElement('li');
                newLi.textContent = "正在读取数据。。。";
                $$("olStatus").appendChild(newLi)
            }
        }
    </script>
</head>

<body>
    <form id="frmTmp" action="#">
        <fieldset>
            <legend>展示文件读取时触发事件的先后顺序：</legend>
            <input type="file" onchange="showEvent(this.files)" name="feUpload" id="feUpload" />
            <ol id="olStatus"></ol>
        </fieldset>
    </form>
</body>

</html>
3.页面效果

4.源码分析

本例中，单击选择文件，触发自定义函数showEvent()，先检测是否浏览器知否支持FileReader对象，

以文本编码的方式读入页面，通过排序列表ul中添加li来看哪个事件先触发，整个排序就是事件触发的顺序。

5.3 使用DataTransfer对象拖放上传图片文件

DataTransfer对象中提供方法，实现浏览器和其他应用程序之间文件的拖动。

1.功能描述

页面表单中，创建一个

  • 元素，用于接收并预览拖入的图片文件。

选择图片文件拖动的方式将文件放入该元素内，并以预览的方式显示。

2.实现代码
3.页面效果
4.代码分析

5.4 文件读取时的错误和异常

文件读取过程中，出现错误和异常，通过FileError对象获取错误与异常。

1.功能描述

出错时，触发onerror事件。

2.错误代码说明
  • NOT_FOUND_ERR 文件无法找到或原文件已被修改
  • SECURITY_ERR 出于安全的考虑，无法获取数据文件
  • ABORT_ERR 触发了abort事件，中止文件读取的过程
  • NOT_READABLE_ERR 由于权限原因，不能获取数据文件
  • ENCODING_ERR 读取文件太大，超出读取时地址的限制

如果案例无法动态显示，直接看笔记

【有道云笔记】《HTML5实战》https://note.youdao.com/s/KjHV02fO

阿立聊代码
关注
  • 15
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
使用Windbg分析dump文件的一般步骤及要点详解
dvlinker的技术专栏
05-25 4万+
通过一个问题实例详细讲解使用Windbg静态分析dump文件的完整过程。
pdb符号文件详解
dvlinker的技术专栏
06-28 9634
本文详细讲述了pdb符号库文件相关的内容。
HTML5 视频 Vedio 标签详解
一名全栈开发工程师
05-31 7038
HTML5 引入了标签，允许开发者在网页中直接嵌入视频文件，而不需要依赖第三方插件。
HTML5 音频 Audio 标签详解
一名全栈开发工程师
05-31 4017
HTML5 引入了标签，允许开发者在网页中直接嵌入音频文件，而不需要依赖第三方插件。
HTML5中audio元素属性详解
XiaoShen`s BLOG
10-27 5969
HTML5中audio元素属性详解 src：String型，所播放音频的 url。 autoplay：值为autoplay，如果出现该属性，则音频在就绪后马上播放。 controls：值为controls，如果出现该属性，则向用户显示控件，比如播放按钮。 loop：值为loop，如果出现该属性，则每当音频结束时重新开始播放。 audio 有几个事件： onended：当媒介已抵达结尾时运行脚本，也就是当前歌曲播放完了，这里的“媒介”是指audio标签。 onloadstart：当浏览器开始加载媒介数据时运行
HTML5中video元素详解
liu_chenglong的博客
06-25 4603
属性说明controls显示标准的 HTML5 视频/音频播放器控制条、控制按钮。autoplay让文件自动播放。loop让文件循环播放。preload属性是用来缓存大体积文件的。它有三个可选值：“none” 不缓存、“auto” 缓存、“metadata” 只缓存文件元信息poster视频封面这个属性在 ios 10中设置有用，其他的目前还不起作用，让视频在小窗内播放，也就是不是全屏播放IOS微信浏览器支持小窗内播放启用H5播放器，是wechat安卓版特性。
Nginx 配置文件详解
新疆程序员阿达西的博客
05-23 5580
Nginx 是一款高性能的HTTP和反向代理服务器，也是一个IMAP/POP3/SMTP代理服务器。HTTP配置部分几乎涵盖了Nginx的所有HTTP相关配置。以下是一个综合的Nginx配置示例，展示了如何配置多个虚拟主机和处理静态文件、反向代理等功能。本文将详细介绍其配置文件结构及常用的配置指令，以帮助你更好地理解和使用Nginx。全局配置部分用于设置Nginx服务器的全局参数，如用户、工作进程数、进程权限等。事件配置部分用于处理Nginx服务器的工作连接数和连接处理方式。块代表一个虚拟主机。
html5的input类型和所有属性详解
每天都记录一点点！
08-11 1万+
一直以来只知道HTML5中的input标签type属性的属性值有很多，但具体并没有很清楚，这段时间做了个汇总，方便以后使用，也做个知识储备！ 在重点介绍type之前，先总结一下input标签的属性： type：该属性是input标签里唯一的必须输入的属性，当然，也可以不填，默认为type = "text"。具体它有那些值，我们后面再讨论。required：标记一个字段是否为必须。如
nginx的配置文件详解
热门推荐
tian的博客
10-11 4万+
nginx的配置文件详解
在html语言中读取txt文件中的内容,Javascript写入txt和读取txt文件示例详解
weixin_28933027的博客
05-31 6106
1. 写入FileSystemObject可以将文件翻译成文件流。第一步：例：代码如下:Var fso=new ActiveXObject(Scripting.FileSystemObject);创建一个可以将文件翻译成文件流的对象。第二步：用于创建一个textStream 对象括号里边有三个属性1. 文件的绝对路径2. 文件的常数 只读=1，只写=2 ，追加=8 等权限。(ForReading ...
详解node服务器中打开html文件的两种方法
01-20
本文介绍了详解node服务器中打开html文件的两种方法，分享给大家，具体如下： 方法1：利用 Express 托管静态文件，详情查看这里 方法2：使用fs模块提供的readFile方法打开文件，让其以text/html的形式输出。 代码：...
详解HTML5中download属性的应用
12-13
而在HTML 5浏览器中，可以支持download属性了，如下： XML/HTML Code复制内容到剪贴板 <a>report  download属性的好处在于，在用户下载文件的时候，显示在用户浏览器 中的“另存”为的文件显示框中，显示的是这个...
《HTML5开发精要与实例详解》配套源码
01-31
全书一共分为10章，全书以HTML 5的使用环境和基本特征开篇，依次详细地讲解了HTML 5中新增的交互元素、重要元素、表单与文件、视频与音频、绘画、数据存储、离线应用、网络应用和拖放等核心内容。
HTML5中FileReader接口使用方法实例详解
09-28
FileReader接口提供了一个异步API，使用该API可以在浏览器主线程中异步访问文件系统，读取文件中的数据，下面通过本文给大家分享HTML5中FileReader接口使用方法实例详解，感兴趣的朋友一起看看吧
HTML5 --- 进阶教程
最新发布
daoliuweisong12的博客
09-06 1295
本教程涵盖了HTML5的多个进阶知识点，包括语义化标签、表单新特性、多媒体、Canvas与SVG、Web Sockets、Web Storage和Geolocation等。通过实战演示，我们深入了解了这些技术的应用场景和具体实现方法。HTML5作为现代网页开发的核心技术之一，不仅继承了HTML4的所有功能，还引入了大量新特性和API，极大地丰富了网页的表现力和交互性。Canvas是一个用于绘制图形的HTML元素，它提供了通过JavaScript和Canvas API来绘制图形、图表、图像等的功能。
中秋之美——html5+css+js制作中秋网页
Timi2019的博客
09-02 958
八月十五，秋已过半，是为中秋。“但愿人长久，千里共婵娟”，中秋时节，气温已凉未寒，天高气爽，月朗中天，正是观赏月亮的最佳时令。古人把圆月视为团圆的象征，因此，又称八月十五为“团圆节”。
HTML和HTML5有什么区别
m0_56131422的博客
08-30 1600
HTML，即超文本标记语言，是构建网页的标准语言。最初版本的HTML简单地定义了网页的结构和内容，包括文本、图片、链接等元素。HTML的基本标签包括等，它们帮助浏览器正确渲染网页内容。HTML5是HTML的第五个主要版本，旨在解决Web开发中的一些长期存在的问题，并引入了许多新功能。HTML5不仅扩展了现有功能，还增强了对多媒体、图形和应用程序的支持。
跨页面进行数据通讯
榴莲不好吃的专栏
09-02 500
Broadcast Channel API 允许在一个源的不同窗口、标签页或 iframe 之间进行通信。这是一种实时的通信机制，非常适合需要实时同步数据的场景。3.iframe 数据通讯 postMessage/message（可设置不同源数据通讯）1.使用 LocalStorage 或 SessionStorage（同源）// 检查消息来源，确保来自正确的源。// 检查消息来源，确保来自正确的源。'Hello 来自父亲的消息!'Hello 来自儿子的消息!// 忽略来自自身的消息。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

阿立聊代码

有作用的，有闲钱的支持一点。

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值