<!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. asp.net连接Access数据库实现登陆功能

    这里话就不多说了,直接演示代码. 连接access数据库首先需要配置web.config <appSettings> <add key="AccessConnString& ...

  2. 20170221 SE03 打包请求

    请求处理:SE03 只会有其中两三个功能,还需要学习. 请求打包,是传输请求时候常用的一种方法. 步骤如下: 注意点:1.打包请求一定仔细检查,不要遗漏           如果请求不多,分开传是更好 ...

  3. redis06----消息订阅

    使用办法: 订阅端: Subscribe 频道名称 发布端: publish 频道名称 发布内容 r1:>publish news "aaaaaa" "" ...

  4. 安装YCM出现：YouCompleteMe unavailable no module named frozendict或者 YouCompleteMe unavailable no module named future

    参考博文:http://blog.sina.com.cn/s/blog_8f70642d0102wo57.html 原因就是你或者没用Vundle安装,或者Vundle由于网速太慢下载到一半不能把安装 ...

  5. BZOJ_1441_Min_数学+裴蜀定理

    BZOJ_1441_Min_数学+裴蜀定理 Description 给出n个数(A1...An)现求一组整数序列(X1...Xn)使得S=A1*X1+...An*Xn>0,且S的值最小 Inpu ...

  6. BZOJ_1492_[NOI2007]货币兑换Cash_CDQ分治+斜率优化

    BZOJ_1492_[NOI2007]货币兑换Cash_CDQ分治+斜率优化 Description 小Y最近在一家金券交易所工作.该金券交易所只发行交易两种金券:A纪念券(以下简称A券)和 B纪念券 ...

  7. 【扬中集训DAY2T2】 机智的AmyZhi

    [题目链接] 点击打开链接 [算法] 据说标算是暴力? 从N-200开始搜 不过我用了搜索+一些奇怪的剪枝,也A了.... [代码] 标程 #include<bits/stdc++.h> ...

  8. Open multiple excel files in WebBrowser, only the last one gets activated

    http://stackoverflow.com/questions/20578053/open-multiple-excel-files-in-webbrowser-only-the-last-on ...

  9. Binder通信机制介绍

    1.Binder通信机制介绍 这篇文章会先对比Binder机制与Linux的通信机制的差别,了解为什么Android会另起炉灶,采用Binder.接着,会根据 Binder的机制,去理解什么是Serv ...

  10. 架构-MVVM：MVVM核心概念

    ylbtech-架构-MVVM:MVVM核心概念 1.返回顶部 1. MVVM模式是Model.View.ViewModel的简称,最早出现在WPF,现在Silverlight中也使用该模式,MVVM ...