<!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. VC最小化到托盘程序

    在实际操作电脑的过程中,我们常常可以看到一些应用程序可以最小化到桌面右下角的托盘中显示,如一些杀毒软件等开机就显示在托盘中,或是我们常用的QQ等聊天工具,都可以最小化在托盘中,如图-1. 在图-1中, ...

  2. Domino函件收集器的配置及使用方法

     [背景] 今天一个朋友问我这样一个问题,他们OA的应用数据库和接口数据库部署在两台不同的server. 接口server主要负责和第三方系统进行集成,第三方系统调接口创建OA单据,OA系统进行审 ...

  3. MapReduce算法形式二：去重（HashSet）

    案例二:去重(shuffle/HashSet等方法)shuffle主要针对的是key去重HashSet主要针对values去重

  4. Window XP安装Ubuntu14.04实现Samba文件共享

    安装了Ubuntu14.04之后,在虚拟机设置里设置了文件共享.但在mnt文件夹下没有hgfs这个文件夹.依照网上说的去做还是不行,仅仅好放弃.改用samba实现Windows与Ubuntu文件共享. ...

  5. Mac开发必备工具（二）—— iTerm 2

    iTerm 2 简介 iTerm 2 is a terminal emulator for Mac OS X that does amazing things. iTerm 2 有很多能够提升效率的实 ...

  6. 微信的API都是通过https调用实现的，分为post方法调用和get方法调用。不需要上传数据的采用get方法（使用IntraWeb开发）

    首先需要明确的是,微信的API都是通过https调用实现的,分为post方法调用和get方法调用.不需要上传数据的采用get方法(例如获取AccessToken),而需要向微信服务器提交数据的采用po ...

  7. ASP.NET Session and Forms Authentication and Session Fixation

    https://peterwong.net/blog/asp-net-session-and-forms-authentication/ The title can be misleading, be ...

  8. javascript中的_return_false和return_true

    1. [代码][JavaScript特效]代码     关于javascript中的 return false和return true 2008年12月22日 星期一 下午 09:31return 是 ...

  9. MongoDB C++ gridfs worked example

    使用libmongoc,参考:http://mongoc.org/libmongoc/current/mongoc_gridfs_t.html #include <mongoc.h> #i ...

  10. 一题多解 —— linux 日志文件（log）reload 重新载入

    1. tail -F 等同于–follow=name –retry,根据文件名进行追踪,并保持重试,即该文件被删除或改名后,如果再次创建相同的文件名,会继续追踪 也即可以间接实现从日志文件末尾,不断载 ...