<!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. 每天一个JavaScript实例-apply和call的使用方法

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  2. webservice client setTimeOut

    一:eclipse生成的client,基于axis client_sub.getOptions().setTimeOutInMilliSeconds(1000*60); client_sub表示一个客 ...

  3. 【腾讯bugly干货分享】精神哥手把手教你怎样智斗ANR

    上帝说要有ANR,于是Bugly就有了ANR上报.那么ANR究竟是什么? 近期非常多童鞋问起精神哥ANR的问题,那么这次就来聊一下,鸡爪怎么泡才好吃.噢不,是怎样高速定位ANR. ANR是什么 简单说 ...

  4. Eclipse 创建新的workspace

    工具:eclipse  版本:4.5.1 1.配置jdk(java-Compiler).maven(Mven-User Settings) 2.从svn拉取项目,创建.project(修改其项目名称) ...

  5. TTL以及LVDS接口传输【转】

    本文转载自:http://blog.csdn.net/jscese/article/details/16860833 TTL接口:属于并行方式传输数据的接口,采用这种接口时,不必在液晶显示器的驱动板端 ...

  6. bzoj3090: Coci2009 [podjela]

    这个范围明显树包的 然而值并不滋磁 想了一会发现可以带一维当前子树用了多少边,搞定当前向上还能送多少 然后发现会有搞不定的情况,要向上传负数 每次都要重新初始化,负数强制要要 #include< ...

  7. IO、FileInputStream、(二十)

    1.IO流概述及其分类 * 1.概念(什么是IO?) * IO流用来处理设备之间的数据传输 * Java对数据的操作是通过流的方式 * Java用于操作流的类都在IO包中 * 流按流向分为两种:输入流 ...

  8. 最小生成树，并查集的思想 nyoj1239

    #include<stdio.h> #include<string.h> #include<algorithm> using namespace std; int ...

  9. [SHOI 2015] 脑洞治疗仪

    [题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=4592 [算法] 对于操作1 , 我们首先查询区间[l0 , r0]中有多少个1 , ...

  10. bzoj1911 [Apio2010]特别行动队——斜率优化DP

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1911 相当明显的斜率优化,很好做: 注意slp里面要有(double),以免出现精度问题. ...