学习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,一经查实,立即删除!

相关文章

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…

使用Nodejs发送邮件

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

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…

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

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

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 …

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 使用的是布…

HTTP协议学习笔记

1.HTTP协议简介 &#xff08;1&#xff09;客户端连上web服务器后&#xff0c;若想获得web服务器中的某个web资源&#xff0c;需遵守一定的通讯格式&#xff0c;HTTP协议用于定义客户端与web服务器通迅的格式。 &#xff08;2&#xff09;HTTP是hypertext transfer protocol&…

defer和async的原理与区别

上一篇刚转载了一篇有关于网站性能优化的文章&#xff0c;其中提及到了页面的加载和渲染的过程&#xff0c;提到了defer和async的相关区别&#xff0c;但是本人在此之前并没有深究其中的区别。 defer和async是script标签的两个属性&#xff0c;用于在不阻塞页面文档解析的前提…

一些奇妙的线段树操作

学过数据结构和会做题完全是两个概念orz 各种各样的题目都应该见识一下 简单的目录&#xff1a; 最大连续长度 吉司机线段树 线段树合并/分裂 最大连续长度问题 典型题目&#xff1a;HDU 3911 &#xff08;$Black$ $And$ $White$&#xff09; 题目大意&#xff1a;有一个长度为…

微服务实践沙龙-上海站

微服务的概念最早由Martin Fowler与James Lewis于2014年共同提出&#xff0c;核心思想是围绕业务能力组织服务&#xff0c;各个微服务可被独立部署&#xff0c;服务间是松耦合的关系&#xff0c;以及数据和治理的去中心化管理。微服务能够帮助企业应对业务复杂、频繁更新以及团…

(四)RabbitMQ消息队列-服务详细配置与日常监控管理

&#xff08;四&#xff09;RabbitMQ消息队列-服务详细配置与日常监控管理 原文:&#xff08;四&#xff09;RabbitMQ消息队列-服务详细配置与日常监控管理RabbitMQ服务管理 启动服务&#xff1a;rabbitmq-server -detached【 /usr/local/rabbitmq/sbin/rabbitmq-server -deta…

前端开发工程化探讨--基础篇(长文)

转载自UC资深前端工程师张云龙的github 喂喂喂&#xff0c;那个切图的&#xff0c;把页面写好就发给研发工程师套模板吧。 你好&#xff0c;切图仔。 不知道你的团队如何定义前端开发&#xff0c;据我所知&#xff0c;时至今日仍然有很多团队会把前端开发归类为产品或者设计岗…

Python读取Json字典写入Excel表格的方法

需求&#xff1a; 因需要将一json文件中大量的信息填入一固定格式的Excel表格&#xff0c;单纯的复制粘贴肯定也能完成&#xff0c;但是想偷懒一下&#xff0c;于是借助Python解决问题。 环境&#xff1a; Windows7 Python2.7 Xlwt 具体分析&#xff1a; 原始文件为json列表&am…

Spring-BeanFactory源码分析

正式进入Spring 源码分析这个模块了&#xff0c;对于spring这个庞大的工程&#xff0c;如果要一点点的完全分析是非常困难的&#xff0c;对于应用型框架&#xff0c;我还是偏向于掌握思想或者设计&#xff0c;而不是记住代码&#xff0c;对于初次看spring源码&#xff0c;相信大…

我所知道的HTTP和HTTPS

摘要&#xff1a;相比之前的传输协议&#xff0c;HTTP/2在底层方面做了很多优化。有安全、省时、简化开发、更好的适应复杂页面、提供缓存利用率等优势&#xff0c;阿里云早在去年发布的CDN6.0服务就已正式支持HTTP/2&#xff0c;访问速度最高可提升68%。 写在前面 超文本传输…

Jenkins配置与使用

Jenkins是一个开源软件项目&#xff0c;旨在提供一个开放易用的软件平台&#xff0c;使软件的持续集成变成可能。Jenkins是基于Java开发的一种持续集成工具&#xff0c;用于监控持续重复的工作&#xff0c;功能包括&#xff1a;1、持续的软件版本发布/测试项目。2、监控外部调用…

fastDFS使用

fastDFS : 分布式文件系统C语言开发,fastDFS为互联网量身定制,考虑到了冗余备份,负载均衡,线性扩容...很容易搭建集群文件存储系统.存储在fastDFS图片:相当于存储在本地磁盘一样访问图片:相当于访问本地磁盘存储结构:组名/虚拟磁盘路径/动态生成文件名.扩展名192.168.100.20/gr…