H5 FileReader读取文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
height: 20px;
width: 0%;
background-color:red;
}
</style>
</head>
<body>
<!--展示图片:-->
<!--src:指定路径(资源定位--url):src请求的是外部文件,一般来说是服务器资源。意味着它需要向服务器发送请求,它占用服务器资源-->
<!--<img src="../images/l1.jpg" alt="">--> <!--需求:即时预览:
即时:当用户选择完图片之后就立刻进行预览的处理 >>onchange
预览:通过文件读取对象的readAsDataURL()完成-->
<form action="">
文件: <input type="file" name="myFile" id="myFile" onchange="getFileContent();" multiple=“multiple”> <br>
<div></div>
<p></p>
<input type="submit">
</form>
<img src="" alt="">
<script>
var div=document.querySelector("div");
/*FileReader:读取文件内容
* 1.readAsText():读取文本文件(可以使用Txt打开的文件),返回文本字符串,默认编码是UTF-8
* 2.readAsBinaryString():读取任意类型的文件。返回二进制字符串。这个方法不是用来读取文件展示给用户看,而是存储文件。例如:读取文件的内容,获取二进制数据,传递给后台,后台接收了数据之后,再将数据存储
* 3.readAsDataURL():读取文件获取一段以data开头的字符串,这段字符串的本质就是DataURL.DataURL是一种将文件(这个文件一般就是指图像或者能够嵌入到文档的文件格式)嵌入到文档的方案。DataURL是将资源转换为base64编码的字符串形式,并且将这些内容直接存储在url中>>优化网站的加载速度和执行效率。
* abort():中断读取*/
function getFileContent(){
/*1.创建文件读取对象*/
var reader=new FileReader();
/*2.读取文件,获取DataURL
* 2.1.说明没有任何的返回值:void:但是读取完文件之后,它会将读取的结果存储在文件读取对象的result中
* 2.2.需要传递一个参数 binary large object:文件(图片或者其它可以嵌入到文档的类型)
* 2.3:文件存储在file表单元素的files属性中,它是一个数组*/
var file=document.querySelector("#myFile").files;
reader.readAsDataURL(file[0]); //读取图片
// reader.readAsText(file[0]); //读取txt文件
/*获取数据*/
/*FileReader提供一个完整的事件模型,用来捕获读取文件时的状态
* onabort:读取文件中断片时触发
* onerror:读取错误时触发
* onload:文件读取成功完成时触发
* onloadend:读取完成时触发,无论成功还是失败
* onloadstart:开始读取时触发
* onprogress:读取文件过程中持续触发*/
reader.onload=function(){
//console.log(reader.result);
/*展示*/
document.querySelector("img").src=reader.result;
// document.querySelector('p').innerText= reader.result; } reader.onprogress=function(e){
var percent= e.loaded/ e.total*100+"%";
div.style.width=percent;
}
}
</script>
</body>
</html>
H5 FileReader读取文件的更多相关文章
- HTML5 文件域+FileReader 读取文件(一)
在HTML5以前,HTML的文件上传域的功能具有很大的局限性,这种局限性主要体现在如下两点: 每次只能选择一个文件进行上传 客户端代码只能获取被上传文件的文件路径,无法访问实际的文件内容 一.File ...
- FileReader读取文件里文乱码问题
有一个UTF-8编码的文本文件,用FileReader读取到一个字符串,然后转换字符集:str=newString(str.getBytes(),"UTF-8");结果大部分中文显 ...
- HTML5 文件域+FileReader 读取文件并上传到服务器(三)
一.读取文件为blob并上传到服务器 HTML <div class="container"> <!--读取要上传的文件--> <input type ...
- HTML5 文件域+FileReader 读取文件(二)
一.读取文本文件内容,指定字符编码 <div class="container"> <!--文本文件验证--> <input type="f ...
- FileReader读取文件详解
FileReader是一种异步文件读取机制,结合input:file可以很方便的读取本地文件. input:file 在介绍FileReader之前,先简单介绍input的file类型. <in ...
- FileReader读取文件
前言:FileReader是一种异步文件读取机制,结合input:file可以很方便的读取本地文件. input:file 在介绍FileReader之前,先简单介绍input的file类型. < ...
- FileReader()读取文件、图片上传预览
前言 FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用 File 或 Blob 对象指定要读取的文件或数据. 其中File对象可以是来自用户 ...
- HTML5之fileReader异步读取文件及文件切片读取
fileReader的方法与事件 fileReade实现图片预加载 fileReade实现文件读取进度条 fileReade的与file.s实现文件切片读取 一.fileReader的方法与事件 1. ...
- HTML5 文件域+FileReader 分段读取文件并上传(八)-WebSocket
一.同时上传多个文件处理 HTML: <div class="container"> <div class="panel panel-default&q ...
随机推荐
- 备考2019年6月份PMP考试-分享一些考试笔记(二)
最新比较经典的100道试题,有备考的小伙伴可以练练手,文章末尾附答案. 1 一个项目经理在运作一个数据中心安装项目.他发现相关方很恼火,因为他超出了预算,原因是人员费用要高于原先的计划.另外项 ...
- oracle 处理表的一列
---删除一列和数据一起删除了. ALTER TABLE 表名 DROP COLUMN 列名; ---添加一列 alert table 表名 add column 列名; ---只删除一列的数据 没有 ...
- babel 7.x 结合 webpack 4.x 配置
今天在学习webpack的使用的时候,由于学习的教程是2018年初的,使用的是 webpack 3.x 和 babel 6.x ,然后学习的过程中出现的了很多问题. 解决问题之后,总结一下新的 bab ...
- 利用Factory-boy和sqlalchemy来批量生成数据库表数据
测试过程中免不了要构造测试数据,如果是单条数据,还比较简单,但如果是批量数据,就比较麻烦了. 最近看到Factory_boy这个python第三方库,它通过SQLAlchemyModelFactory ...
- PHP文件载入和载入路径
一.文件载入 所谓的文件的载入,就是指将需要的目标文件的代码载入到当前的位置上,从某种意义上来说,文件载入也是一种流程控制! 文件载入的主要目的是体现网站的分层设计,因为不同的页面有很多相同的区域(相 ...
- 自学FPAG笔记之 " top_down “
top_town设计:在FPGA中top_down(自顶向上)是十分重要的一种编程方法,优点:使用top_down方法去写代码会使得程序看起来十分简洁,缺点:top_down写的文件会特别多. 例子: ...
- lower_bounder()和upper_bound()的函数
lower_bound() .upper_bound()都运用于有序区间的二分查找. ForwardIter lower_bound(ForwardIter first, ForwardIter la ...
- 通过JS操作CSS
动态效果如图所示: 第一种实现方法: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...
- 2019.8.3 [HZOI]NOIP模拟测试12 C. 分组
2019.8.3 [HZOI]NOIP模拟测试12 C. 分组 全场比赛题解:https://pan.baidu.com/s/1eSAMuXk 刚看这题觉得很难,于是数据点分治 k只有1和2两种,分别 ...
- VelocityTracker监控速度!!!
用来追踪触摸事件(flinging事件和其他手势事件)的速率.用obtain()函数来获得类的实例,用addMovement(MotionEvent)函数将motion event加入到Velocit ...