<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

	</head>

	<body>

		选择图片文件

		<!--

			input[file]标签的accept属性可用于指定上传文件的 MIME类型

			Chrome和Safari等Webkit浏览器下却出现了响应滞慢的问题

			是accept=”image/*” 属性的问题

			将 * 通配符修改为指定的MIME类型，就可以解决Webkit浏览器下的对话框显示滞慢的问题

		-->

		<input type="file" id="imgFile" accept="image/jpeg,image/png,image/gif"/>

		<br />

		选择文本文件

		<input type="file" id="textFile" accept="text/*"/>

		<br />

		<img src="" alt="图片" id="image"/>

		<br />

		<div id="txt"></div>

		<script>

			//获得dom对象

			var imgFile = document.getElementById('imgFile');

			var textFile = document.getElementById('textFile');

			var image = document.getElementById('image');

			var txt = document.getElementById('txt');

			/*

			 * 读取二进制图片数据

			 */

			imgFile.onchange = function() {

				//获得文件读取对象          异步读取文件的接口 - FileReader

				var fr = new FileReader();

				//读取文件内容

				//readAsDataURL方法用于读取指定Blob或File的内容。

				//当读操作完成，readyState变为DONE, loadend被触发，此时result属性包含数据：URL以base64编码的字符串表示文件的数据。

				fr.readAsDataURL( this.files[0] );

				//异步读取文件内容，读取完毕会触发fr的onload事件

				fr.onload = function() {

					//fr对象的result属性代表文件的内容（base64数据）

					console.log(this.result);

					//显示图片

					image.src = this.result;

				}

			}

			/*

			 * 读取纯文本数据

			 */

			textFile.onchange = function() {

				//获得文件读取对象

				var fr = new FileReader();

				//读取文件内容

				fr.readAsText( this.files[0] );

				fr.onload = function() {

					console.log(this.result);

					txt.innerText =  this.result;

				}

			}

		</script>

	</body>

</html>

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

	</head>

	<body>

		选择文件：<input type="file" accept="image/gif,image/png,image/jpeg" onchange="filecheck(this)"/>

		<script>

			function filecheck(obj){

				var fr=new FileReader();

				fr.readAsDataURL(obj.files[0]);

				fr.onload=function(){

					console.log(this.result);//此处的this指代fr这个对象

				}

			}

		</script>

	</body>

</html>

　　

　　

h5-21-文件操作-读取文件内容的更多相关文章

  1. Python文件操作：文件的打开关闭读取写入

    Python文件操作:文件的打开关闭读取写入 一.文件的打开关闭 Python能以文本和二进制两种方式处理文件,本文主要讨论在Python3中文本文件的操作. 文件操作都分为以下几个步骤: 1.打开文 ...

  2. Python3 将configparser从ini文件中读取的内容转换成字典格式

    因为写脚本的用到了,所以研究了下怎么将configparser从ini文件中读取的内容转换成字典格式. 整理一下,希望能对大家有帮助. 从http://stackoverflow.com/questi ...

  3. C++ 学习笔记之——文件操作和文件流

    1. 文件的概念 对于用户来说,常用到的文件有两大类:程序文件和数据文件.而根据文件中数据的组织方式,则可以将文件分为 ASCII 文件和二进制文件. ASCII 文件,又称字符文件或者文本文件,它的 ...

  4. 文件_ _android从资源文件中读取文件流并显示的方法

    ======== 1   android从资源文件中读取文件流并显示的方法. 在android中,假如有的文本文件,比如TXT放在raw下,要直接读取出来,放到屏幕中显示,可以这样: private ...

  5. PHP 上传文件和读取文件崎岖路

    今天php上传文件和读取文件没有搞出来,全靠后来大神来帮忙,总结一下:主要涉及到一下几个方面,在ubuntu下mkdir文件夹的时候要注意权限问题,一般情况下php是以一个较低的权限去执行的,所以如果 ...

  6. Java IO,io,文件操作,删除文件，删除文件夹，获取文件父级目录

    Java IO,io,文件操作,删除文件,删除文件夹,获取文件父级目录 这里先简单的贴下常用的方法: File.separator //当前系统文件分隔符 File.pathSeparator // ...

  7. 【转】c# winform 创建文件，把值写入文件，读取文件里的值，修改文件的值，对文件的创建，写入，修改

    创建文件和读取文件的值 #region 判断文件是否存在,不存在则创建,否则读取值显示到窗体 public FormMain() { InitializeComponent(); //ReadFile ...

  8. PHP文件操作 读取与写入

    基本知识: PHP文件系统是基于Unix系统的 文件数据基本类型:二进制数据.文本数据 文件输入流:数据从源文件到内存的流动 文件输出流:数据从内存保存到文件的流动 文件操作函数: >>& ...

  9. java 文件操作 读取字节级数据（读取）

    package com.swust; import java.io.*; /* * 功能:按照双精度浮点型.整型.布尔型.字符型.和字符串型的顺序从名为sample.dat文件读取数据 * 分析:用F ...

随机推荐

  1. armel、armhf和arm64

    1 这些名词是什么的缩写 1.1 armel 是arm eabi little endian的缩写.eabi是软浮点二进制接口,这里的e是embeded,是对于嵌入式设备而言. 1.2 armhf 是 ...

  2. svgo

    SVG精简压缩工具svgo简介和初体验 SVG精简压缩工具svgo简介和初体验 « 张鑫旭-鑫空间-鑫生活 https://www.zhangxinxu.com/wordpress/2016/02/s ...

  3. RSA前端JS加密，后端JAVA解密实现

    用RSA非对称加密方式实现.后台生成rsa密钥对,然后在页面设置rsa公钥,提交时用公钥加密密码,生成的密文传到后台,后台再用私钥解密,获取密码明文.这样客户端只需要知道rsa加密方式和公钥,前台不知 ...

  4. jdbc navcat for mysql 连不上远程服务器的原因（安全组设置）

    如果你权限,防火墙什么都设置好了,但是还是连不上远程数据库, 那么你就必须要看看你的服务器上安全组的设置(很重要) 这里以阿里云为例子(之前用阿里云服务都没设置),现在阿里云的服务器租的时候就要求配置 ...

  5. iOS webView的常见属性和方法

    一.初始化与三种加载方式 UIWebView继承与UIView,因此,其初始化方法和一般的view一样,通过alloc和init进行初始化,其加载数据的方式有三种: 第一种: - (void)load ...

  6. vue中显示和隐藏导航

    const router = new VueRouter({ mode: 'history', routes: [ { path: '/first', component: firstView, me ...

  7. Jackson序列化和反序列化

    1,下载Jackson工具包(jackson-core-2.2.3.jar  jackson-annotations-2.2.3.jar  jackson-databind-2.2.3.jar ) j ...

  8. Kappa:比Lambda更好更灵活的实时处理架构

    为了进一步探讨这种批处理和实时处理有效整合在同一系统的架构,我们将在今天的文章中分析Lambda三层结构模型的适用场景,同时暴露出Lambda架构一个最明显的问题:它需要维护两套分别跑在批处理和实时计 ...

  9. linux oracle命令行窗口命令上下翻阅

    1.上传rlwrap-0.37.tar.gz到/stage   cd /stage/ 解压tar xzvf rlwrap-0.37.tar.gz cd rlwrap-0.37 ./configure ...

  10. 「HNSDFZ暑期集训 测试1」「LuoguT36488」 连连看

    题目描述 给定一个n × m的矩形地图,每个各自上可能为空,可能有牌,牌上有一个数字. 对于两张同样数字的牌,如果我们可以在地图上用不超过三根水平或竖直,在地图界内,且不经过其他牌的线段将两张牌连起来 ...