最新HTML5中的文件详解

第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 = 0var 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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/421252.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C语言 ——— 学习并使用 #if defined #ifdef #ifndef 条件编译指令

目录 学习 #if defined #ifdef #ifndef 条件编译指令 使用 #if defined 和 #ifdef 条件编译指令 使用 #ifndef 条件编译指令 学习 #if defined #ifdef #ifndef 条件编译指令 #if #ifndef 条件编译指令是用来判断某个符号是否被定义过&#xff0c;被定义过的话就为真&#x…

【网络安全】-xss跨站脚本攻击实战-xss-labs(1~10)

Level1: 检查页面源代码&#xff1a; function函数&#xff1a; (function(){try{let tn ;if(tn.includes(oem)){Object.defineProperty(document, referrer, {get: function(){return ;}});}else if(tn.includes(hao_pg)){if(!document.referrer.match(tn)){Object.definePro…

centos8构建nginx1.27.1+BoringSSL+http3+lua+openresty

需要接入http3&#xff0c;索性最新的nginx在构建一波&#xff0c;趟一遍坑 准备工作 1.环境命令安装 yum install GeoIP -y yum install GeoIP-devel -y yum install libmaxminddb-devel -y yum install -y patch wget zlib zlib-devel lftp gcc gcc-c make openssl-devel p…

Ton链历险记(一)

系列文章目录 文章目录 系列文章目录前言第一天、FunC环境安装总结 前言 欢迎来到神秘的web3小镇&#xff0c;这里是充满未知和魔法的土地&#xff0c;神兽出没&#xff0c;超能力攻击&#xff0c;卡牌收集。。。 穷困却又励志的无天赋法师木森。因为没有交够保护费&#xff…

一篇文章带你看懂住宅代理如何实现内容过滤

在网络安全中&#xff0c;内容过滤是用户隐私保护的重要组成部分&#xff0c;将不良内容拦截在安全网之外是内容过滤的重中之重。在当下&#xff0c;住宅代理作为异军突起的网络安全工具&#xff0c;在内容过滤上有着不错的表现。本文将深入探讨住宅代理如何实现内容过滤&#…

【d41】【Java】【力扣】21.合并两个有序链表

题目 21. 合并两个有序链表 将两个升序链表合并为一个新的 升序 链表并返回。新链表是通过拼接给定的两个链表的所有节点组成的。 示例 1&#xff1a; 输入&#xff1a;l1 [1,2,4], l2 [1,3,4] 输出&#xff1a;[1,1,2,3,4,4]示例 2&#xff1a; 输入&#xff1a;l1 [],…

猜测、实现 B 站在看人数

猜测、实现 B 站在看人数 猜测找到接口参数总结 实现 猜测 找到接口 浏览器打开一个 B 站视频&#xff0c;比如 《黑神话&#xff1a;悟空》最终预告 | 8月20日&#xff0c;重走西游_黑神话悟空 (bilibili.com) &#xff0c;打开 F12 开发者工具&#xff0c;经过观察&#xf…

Wni11 下 WSL 安装 CentOS

Wni11 下 WSL 安装 CentOS 方法一、安装包安装下载包安装安装打开 CentOS1. 从 Windows 终端 打开2. 从 PowerShell 打开 方法二、导入 CentOS 的 tar 文件进行安装0. 查看版本&#xff08;可选&#xff09;1. 导出 Docker 容器到 tar 文件2. 将 tar 文件导入 WSL2.1. 导入 tar…

最大间距问题

LeetCode164 最大间距 基数排序 #include <iostream> #include <vector> using namespace std;class Solution { public:int maximumGap(vector<int>& nums) {int nnums.size();if(n<2) return 0;int exp1;int Maxnums[0];vector<int> buf(n)…

基于HTML+JS+CSS+Echarts实现的设备环境监测可视化平台前端整套模板

效果图 基于HTMLJSCSSEcharts实现的设备环境监测可视化平台前端整套模板。可用过修改源码快速完成需求。 源码结构 下载地址

tabBar设置底部菜单选项以及iconfont图标,setTabBar设置TabBar和下拉刷新API

tabBartabBar属性:设置底部 tab 的表现 ​ ​ ​ ​ 首先在pages.json页面写一个tabBar对象,里面放入list对象数组,里面至少要有2个、最多5个 tab, 如果只有一个tab的话,H5(浏览器)依然可以显示底部有一个导航栏,如果没有,需要重启后才有,小程序则报错,只有2个以上才可以…

Find My资讯|国外外设品牌发布新型素皮护照套,支持苹果Find My功能

外设品牌 Satechi 发布一款采用苹果Find My技术的新型素皮护照套&#xff0c;售价为 59.99 美元。这款新型护照套除了可以存放护照外&#xff0c;还可存放银行卡、信用卡、身份证、登机牌等物品&#xff0c;其最大特性是采用了与苹果 AirTags 相同的技术&#xff0c;内置了可充…

Chrome 本地调试webrtc 获取IP是xxx.local

浏览器输入 chrome://flags/#enable-webrtc-hide-local-ips-with-mdns并将属性改为disabled修改成功后重启浏览器并刷新网页即可

超详细!!!electron-vite-vue开发桌面应用之创建新窗口以及主进程和子进程的通信监听(十二)

云风网 云风笔记 云风知识库 一、新建打开窗口 1、在electron/main.ts中加入主进程打开窗口逻辑代码 import { ipcMain } from "electron"; ipcMain.handle("open-win", (_, arg) > {const childWindow new BrowserWindow({webPreferences: {preloa…

【算法】链表相关

【ps】本篇有 5 道 leetcode OJ。 一、算法简介 链表是一种常见的线性数据结构&#xff0c;是一种在物理结构上非连续、非顺序的存储结构&#xff0c;其中的数据元素的逻辑顺序由其中的指针链接次序实现&#xff0c;指针链接的每一个结构体都是一个节点。 链表的结构多种多样&…

基于C#+SQL Server2008 开发三层架构(CS界面)图书管理系统

图书管理系统 一、项目背景及意义 当今由于信息技术的飞速发展&#xff0c;图书馆作为社会知识信息媒介的功能日益重要&#xff0c;网络环境下的信息资源建设知识仓库的设计&#xff0c;开放存取学术交流模式&#xff0c;知识管理系统&#xff0c;智能检索&#xff0c;数字参…

文件存储阿里云

1.图片存储 图片存储是指将图片文件保存在服务器或云存储中的技术或服务。图片存储的主要目的是方便用户上传、存储、管理和分享图片文件。 图片存储可以分为两种主要类型&#xff1a;本地存储和云存储。 本地存储是将图片文件保存在本地服务器或计算机上的一种方式。这种存…

区块链学习笔记2--区块链技术的形成 以太坊

分布式数据存储&#xff1a; 在每个参与者电脑上备份 账本实时同步和对账 点对点通信 共识机制 加密算法&#xff1a; 对用户个人信息的加密 转账过程中的签名授权 账本一致性校验 挖矿算法的目标hash 区块链2.0技术 以太坊 比特币的出现让经济贸易变得简单&#xff0c;而比特…

LabVIEW环境中等待FPGA模块初始化完成

这个程序使用的是LabVIEW环境中的FPGA模块和I/O模块初始化功能&#xff0c;主要实现等待FAM&#xff08;Field-Programmable Gate Array Module&#xff0c;FPGA模块&#xff09;的初始化完成&#xff0c;并处理初始化过程中的错误。让我们逐步分析各部分的功能&#xff1a; 1.…

[ACTF2020 新生赛]Upload1

1、点开题目链接&#xff0c;页面显示如下&#xff0c;上传test.jpg里面包含一句话木马 GIF89a? <script language"php">eval($_REQUEST[1])</script> 2、使用bp抓包修改后缀&#xff0c;点击发送 3、不关浏览器的代理&#xff0c;在bp中将该包放行 4、…