学习File API用于前端读取文件

1. File API简介

File API对于某些专门的网站的不可或缺的。现在常用它实现对文件的预览等功能。

File API规定怎么从硬盘上提取文件,直接交给在网页中运行中的Javascript代码。然后代码可以打开文件探究数据,无论是本地文件还是其他文件。注意,关键在于文件会被直接交给JavaScript代码,它并不能修改文件,也不能创建新文件,想要保存任何数据,需要将数据发送到服务器或者保存在本地存储空间中。

2. 读取文件

在通过File API操作文件之前,首先必须取得文件。使用File API可以直接读取文本文件的内容。
例如:

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>文件上传</title><style>#fileOutput {border:1px grey solid;width: 500px;}</style>
</head>
<body><input type="file" id="fileInput" onChange="processFiles(this.files)"><div id="fileOutput"></div>
<script>function processFiles(files) {//每个文件对象都有三个有用的属性:name属性保存文件名,size属性保存文件的字节大小,type保存文件的MEMI类型var file = files[0];//创建FileReader对象,var reader = new FileReader();//FileReader用来提取文件内容,但是这个方法是异步的,要提取文件,首先要处理onLoad事件reader.onload = function(e) {//这个事件发生了,意味着数据准备好了,//把它复制到页面的div元素中var output = document.getElementById("fileOutput");//将文件内容转换成一个长字符串,保存在onload事件的e.target.result中output.textContent = e.target.result;};//调用FileReader的readAsText()方法reader.readAsText(file);}
</script>
</body>
</html>

这里写图片描述
上图中,选择一个文件,无需上传,网页中的javascript代码就能取得文本文件,把内容复制到页面中。

readAsText()方法只能处理文本内容的文件,如CSV格式,XML格式,.docx格式和.xlsx格式的文件。
readAsText()方法只是众多读取文件的方法之一,还有readAsBinaryStrng(),readAsDataURL()和readAsArrayBuffer().

  • readAsBinaryStrng()方法可以让应用处理二进制编码的数据,但基本上就是把数据保存在一个文本字符串中,效率不高。
  • readAsArrayBuffer()是对于做数据处理较好的选择,这个方法将数据读到一个数组中,每个数组项代表一字节数据。这套方案的优势是可以用来创建大块数据,然后切分成更小的二进制数据块,以便逐块处理。
  • readAsDataURL()方法则让我们能方便地取到图片数据。

2.1 一次读取多个文件

HTML5也支持一次提交多个文件,只要为<input>元素添加multiple属性即可:

<input type="file" id="Files" name="files[]" multiple />  
<div id="Lists"></div>  
function fileSelect(e) {  e = e || window.event;  var files = e.target.files;  //FileList Objects      var output = [];  for(var i = 0, f; f = files[i]; i++) {  output.push('<li><strong>' + f.name + '</strong>(' + f.type + ') - ' + f.size +' bytes</li>');  }  document.getElementById('Lists').innerHTML = '<ul>' + output.join('') + '</ul>';  }  if(window.File && window.FileList && window.FileReader && window.Blob) {  document.getElementById('Files').addEventListener('change', fileSelect, false);  
} else {  document.write('您的浏览器不支持File Api');  
}  

由以上代码可以看到,html5为file这个dom元素新增了files接口(e.target指向了file input元素,实际上也可以用this来访问,即this.files),得到的就是FileList,通过遍历该集合,即可访问到各个已选择的文件对象。

2.2 通过拖拽读取图片文件

前面我们看到,FileReader处理文本内容只需要一步,同样,处理图片内容也这么简单,而这就要归功于readAsDataURL()方法。
下面的例子中,让用户把图片拖到页面中,然后在图片上绘制。

下面是HTML和css代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>拖拽图片</title><style>#dropBox {margin: 15px;width: 300px;height: 300px;border:5px dashed grey;border-radius: 8px;background: lightyellow;background-size: 100%;background-repeat: no-repeat;text-align: center;}#dropBox div{margin: 100px 70px;color: orange;font-size: 25px;}</style>
</head><body><div id="dropBox"><div>将你的图片拖到此处</div></div>
</body>
</html>

为处理放置文件的操作,需要处理三个事件:onDragEnter、onDragOver、onDrop。页面一加载完成,就会为这三个事件添加处理程序。

var dropBox;
window.onload = function() {dropBox = document.getElementById("dropBox");dropBox.ondragenter = ignoreDrag;dropBox.ondragover = ignoreDrag;dropBox.ondrop = drop;
}

其中,ignoreDrag()函数同时处理onDragEnter和onDragOver事件,前者在鼠标指针进入放置区时发生,后者在拖动文件的鼠标指针位于放置区之上时发生。之所以用同一个函数处理两个事件,原因就是不必对这两个事件作出反应,只要告诉浏览器自己什么也不做即可。

function ignoreDrag(e) {
//因为我们在处理拖放,所以应该确保没有其他元素会取得这个事件e.stopPropagation();e.preventDefault();
}

我们要响应的事件是onDrop,这个事件一发生就说明要取得和处理文件了。

function drop(e) {//取消事件传播及默认行为e.stopPropagation();e.preventDefault();//取得拖进来的文件var data = e.dataTransfer;var files = data.files;//将其传给真正的处理文件的函数processFiles(files);
}function processFiles(files) {var file = files[0];//创建FileReadervar reader = new FileReader();//告诉它准备好数据URL之后做什么reader.onload = function(e) {dropBox.style.backgroundImage = "url('" + e.target.result + "')";};//读取图片:将图片转化为数据URLreader.readAsDataURL(file);
}

效果图:
拖拽前:
这里写图片描述

拖拽后:
这里写图片描述

2.3 浏览器对File API的支持情况

这里写图片描述

更多内容请参考此处

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

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

相关文章

kafka笔记1

Kafka是一款基于发布和订阅的消息系统。一般被称为分布式提交日志或分布式流平台。 Kafka系统是按照一定的顺序持久化保存的&#xff0c;可以按需读取。 Kafka的数据单元被称为消息。类似于数据库中表的一行记录&#xff0c;消息由字节组成&#xff0c;所以没有特别的格式和含义…

Dubbo入门教程

服务端&#xff08;dubbo-server&#xff09; 1. pom.xml <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0"xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaL…

NSAssert和NSParameterAssert

2016.05.05 18:34* 字数 861 阅读 5127评论 0喜欢 17https://www.jianshu.com/p/3072e174554fNSAssert和NSParameterAssert在开发环境中经常被使用&#xff0c;调试和验证代码参数的完整性&#xff0c;断言为真&#xff0c;则表明程序运行正常&#xff0c;而断言为假&#xff0…

【PAT】B1070 结绳(25 分)

此题太给其他25分的题丢人了&#xff0c;只值15分 注意要求最终结果最长&#xff0c;而且向下取整 #include<stdio.h> #include<algorithm> using namespace std; float arr[10005]; int main(){int N;scanf("%d",&N);for(int i0;i<N;i)//输入数据…

Java代码实现负载均衡五种算法

前言&#xff1a; 负载均衡是为了解决并发情况下&#xff0c;多个请求访问&#xff0c;把请求通过提前约定好的规则转发给各个server。其中有好几个种经典的算法。在用java代码编写这几种算法之前&#xff0c;先来了解一下负载均衡这个概念。 1.概念 负载&#xff0c;从字面…

使用Nodejs发送邮件

尝试用了Nodemailer来发送邮件&#xff0c;结果成功了&#xff0c;虽然是相对比较简单的&#xff0c;但还是记录一下吧。 Nodemailer 是 Node.js 应用程序的一个模块&#xff0c;可以方便地发送电子邮件。 使用 # 初始化 pageage.json 文件 $ npm init # 安装依赖 $ npm ins…

HTTP同源策略

同源策略是web安全策略中的一种&#xff0c;非常重要。 同源策略明确规定&#xff1a;不同域的客户端在没有明确授权的情况下&#xff0c;不能读写对方的资源。 简单说来就是web浏览器允许第一个页面的脚本访问访问第二个页面的数据&#xff0c;但是也只有在两个页面有相同的…

Spring Cloud 微服务架构

一、分布式服务框架的发展 1.1 第一代服务框架   代表&#xff1a;Dubbo(Java)、Orleans(.Net)等 特点&#xff1a;和语言绑定紧密 1.2 第二代服务框架   代表&#xff1a;Spring Cloud等 现状&#xff1a;适合混合式开发&#xff08;例如借助Steeltoe OSS可以让ASP.Ne…

JZOJ 4421. aplusb

4421. aplusb Time Limits: 1000 ms Memory Limits: 524288 KB Detailed Limits Goto ProblemSetDescription SillyHook要给小朋友出题了&#xff0c;他想&#xff0c;对于初学者&#xff0c;第一题肯定是ab 啊&#xff0c;但当他出完数据后神奇地发现.in不见了&#xff0c…

跨域资源共享CORS详解

最近深入了解了CORS的相关东西&#xff0c;觉得阮一峰老师的文章写得最详细易懂了&#xff0c;所有转载作为学习笔记。 原文地址&#xff1a;跨域资源共享 CORS 详解 CORS是W3C的一个标准&#xff0c;全称是跨域资源共享&#xff08;Cross-origin resource sharing&#xff0…

计算机网络(十),HTTP的关键问题

目录 1.在浏览器地址栏键入URL&#xff0c;按下回车之后经历的流程 2.HTTP状态码 3.GET请求和POST请求的区别 4.Cookie和Session的区别 5.IPV4和IPV6 十、HTTP的关键问题 1.在浏览器地址栏键入URL&#xff0c;按下回车之后经历的流程 &#xff08;1&#xff09;DNS解析 &#x…

云技术

云技术是指在广域网或局域网内将硬件、软件、网络等系列资源统一起来&#xff0c;实现数据的计算、储存、处理和共享的一种托管技术。

vue中 mock使用教程

//mock/index.js import Mock from mockjs //引入mockjs&#xff0c;npm已安装 import { Random,toJSONSchema } from mockjs // 引入random对象,随机生成数据的对象&#xff0c;&#xff08;与占位符一样&#xff09; Mock.setup({timeout:1000 //设置请求延时时间 }) const …

前端开发掌握nginx常用功能之rewrite

上一篇博文对nginx最常用功能的server及location的匹配规则进行了讲解&#xff0c;这也是nginx实现控制访问和反向代理的基础。掌握请求的匹配规则算是对nginx有了入门&#xff0c;但是这些往往还是不能满足实际的需求场景&#xff0c;例如请求url重写、重定向等等&#xff0c;…

vue2.0脚手架的webpack 配置文件分析

前言 作为 Vue 的使用者我们对于 vue-cli 都很熟悉&#xff0c;但是对它的 webpack 配置我们可能关注甚少&#xff0c;今天我们为大家带来 vue-cli#2.0 的 webpack 配置分析 vue-cli 的简介、安装我们不在这里赘述&#xff0c;对它还不熟悉的同学可以直接访问 vue-cli 查看 …

一个可供中小团队参考的微服务架构技术栈

一个可供中小团队参考的微服务架构技术栈

WinSxS文件夹瘦身

WinSxS文件夹瘦身2014-5-8 18:03:32来源&#xff1a;IT之家作者&#xff1a;阿象责编&#xff1a;阿象 评论&#xff1a;27刚刚&#xff0c;我们分享了如何用DISM管理工具查看Win8.1 WinSxS文件夹实际大小。对于WinSxS文件夹&#xff0c;几乎每个Windows爱好者都认识到其重要性…

bcrypt的简单使用

前段时间在捣鼓个人项目的时候用到了nodejs做服务端&#xff0c;发现使用加密的方法和之前常用的加密方式不太一致&#xff0c;下面以demo的形式总结一下bcrypt对密码进行加密的方法。 一、简介 Bcrypt简介&#xff1a; bcrypt是一种跨平台的文件加密工具。bcrypt 使用的是布…

盒子居中

1、未脱标 margin&#xff1a;0 auto&#xff1b; 2、脱标&#xff08;absolute、fixed&#xff09; left&#xff1a;50%&#xff1b; margin-left&#xff1a;width/2&#xff1b; 转载于:https://www.cnblogs.com/liujianing/p/10356984.html