<!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. HDU 6078 Wavel Sequence 树状数组优化DP

    Wavel Sequence Problem Description Have you ever seen the wave? It's a wonderful view of nature. Lit ...

  2. js modify local file

    https://stackoverflow.com/questions/4561157/is-it-possible-to-modify-a-html-file-from-which-the-scri ...

  3. 使用jsoncpp解析生成json

    在此站点下载jsoncpp(https://sourceforge.net/projects/jsoncpp/这个站点的版本较旧) 在电脑上安装Python,运行amalgamate.py,生成的di ...

  4. leetcode 677. Map Sum Pairs

    Implement a MapSum class with insert, and sum methods. For the method insert, you'll be given a pair ...

  5. B.大钉骑马走江湖

    江湖是什么,对于在象棋界厮杀的大钉来说,江湖就是一个矩阵,他的目标,就是在江湖之中骑着马,从他的位置出发,走到终点. 当然,大钉的马也遵从中国象棋中的“马走日”的规则,而且在矩阵中,也会有一些障碍物, ...

  6. linux地址映射1、2、3（⭐⭐⭐）

    欢迎关注瘋耔新浪微博:http://weibo.com/cpjphone 一.线性映射与非线性映射                                                   ...

  7. 如何查看一个Application是32位的还是64位的？

    使用process explorer查看,找到对应的进程. 注册表的路径是Computer\HKEY_LOCAL_MACHINE\SOFTWARE\WOW6432Node\ 使用powershell查 ...

  8. NOT IN clause and NULL values

    https://stackoverflow.com/questions/129077/not-in-clause-and-null-values This issue came up when I g ...

  9. linux初级学习笔记三：linux操作系统及常用命令，及如何复制和移动文件！(视频序号：02_4)

    本节学习的命令:cp,mv,install,du,read 本节学习的技能:文件的移动与复制 cp( copy):复制和移动文件 cp SRC DEST -r:递归复制一个目录及其目录中的所有文件 - ...

  10. 创建一个Windows Service 程序

    1.新建Windows项目,选择"Windows服务"类型的项目. 2.在生成的Service1.cs中代码中写你需要的代码,如下: using System; using Sys ...