<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>简单的html5 File测试 for pic2base64</title> 

<script>

window.onload = function(){

var input = document.getElementById("demo_input");

var result= document.getElementById("result");

var img_area = document.getElementById("img_area");

if ( typeof(FileReader) === 'undefined' ){

	result.innerHTML = "抱歉，你的浏览器不支持 FileReader，请使用现代浏览器操作！";

	input.setAttribute( 'disabled','disabled' );

} else {

	input.addEventListener( 'change',readFile,false );}

}

function readFile(){

	var file = this.files[0];

	console.log(file);

	//这里我们判断下类型如果不是图片就返回 去掉就可以上传任意文件

	if(!/image\/\w+/.test(file.type)){

	alert("请确保文件为图像类型");

	return false;

}

var reader = new FileReader();

reader.readAsDataURL(file);

reader.onload = function(e){

	//result.innerHTML = '<img src="'+this.result+'" alt=""/>';

	//img_area.innerHTML = '<div class="sitetip">图片img标签展示：</div><img src="'+this.result+'" alt=""/>';

}

}

</script>

</head>

<body>

<input type="file" value="sdgsdg" id="demo_input" />

<textarea id="result" rows=30 cols=300></textarea>

<p id="img_area"></p>

</body>

</html>

　　

html5 filereader 读取图片信息的更多相关文章

  1. HTML5 FileReader读取Blob对象API详解

    使用FileReader对象,web应用程序可以异步的读取存储在用户计算机上的文件(或者原始数据缓冲)内容,可以使用File对象或者Blob对象来指定所要读取的文件或数据.其中File对象可以是来自用 ...

  2. html5 filereader读取流注意事项

    对于截取读入的文件,一定要new FileReader,不可写全局调用同一个reader. 错误代码!!!function readAsBinaryString(file,callback){ rea ...

  3. HTML5 文件域+FileReader 读取文件(一)

    在HTML5以前,HTML的文件上传域的功能具有很大的局限性,这种局限性主要体现在如下两点: 每次只能选择一个文件进行上传 客户端代码只能获取被上传文件的文件路径,无法访问实际的文件内容 一.File ...

  4. 使用html5 FileReader获取图片，并异步上传到服务器(不使用iframe)

    使用html5 FileReader获取图片,并异步上传到服务器(不使用iframe)   原理: 1.使用FileReader 读取图片的base64编码 2.使用ajax,把图片的base64编码 ...

  5. FileReader读取文件详解

    FileReader是一种异步文件读取机制,结合input:file可以很方便的读取本地文件. input:file 在介绍FileReader之前,先简单介绍input的file类型. <in ...

  6. FileReader读取文件

    前言:FileReader是一种异步文件读取机制,结合input:file可以很方便的读取本地文件. input:file 在介绍FileReader之前,先简单介绍input的file类型. < ...

  7. 通过HTML5 FileReader实现上传图片预览功能

    原文:http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201706224590.html 在上传图片到服务器之前,我们希望可以预览一下要上传的图片. ...

  8. 使用html5 FileReader获取图片，并异步上传到server(不使用iframe)

    使用html5 FileReader获取图片,并异步上传到server(不使用iframe) 原理: 1.使用FileReader 读取图片的base64编码 2.使用ajax.把图片的base64编 ...

  9. HTML5 文件读取

    一.定义 input的file类型会渲染为一个按钮和一段文字.点击按钮可打开文件选择窗口,文字表示对文件的描述(大部分情况下为文件名):file类型的input会有files属性,保存着文件的相关信息 ...

随机推荐

  1. uva10480最小割集

    求最小割集 dinic处理后用dfs对所有点进行标记,遍历整个联接边,起点访问了,终点没访问或者起点没访问,终点访问了就是最小割集之一 #include<map> #include< ...

  2. 【hive】时间段为五分钟的统计

    问题内容 今天遇到了一个需求,需求就是时间段为5分钟的统计.有数据的时间戳.对成交单量进行统计. 想法思路 因为数据有时间戳,可以通过from_unixtime()来获取具体的时间. 有了具体的时间, ...

  3. Hadoop1.x HDFS系统架构

    1. HDFS中的一些概念1.1 数据块1.2 NameNode和DataNode1.2.1 管理者:Namenode1.2.1 工作者:Datanode1.3 Secondary Namenode1 ...

  4. OMAP4之DSP核（Tesla）软件开发学习（四）ARM核与DSP核通讯示例

    首先,安卓系统完全启动4AJ.2.1. 其次,查看OMAP4的Tesla相关信息,检查Tesla是否使能.(有如下显示,则OK) cat /d/emoteproc/omap-rproc.0/versi ...

  5. Sublime Text关闭自动更新

    这几天体验了一下传说中的Sublime Text,感觉确实很好用.不过有一点很不爽,每次打开都会自动检测更新,于是Google了一把发现关闭它其实很容易, “首选项”——“设置--用户”,在里面写上& ...

  6. 用 Unity 和 HTC Vive 实现高级 VR 机制（1）

    原文:Advanced VR Mechanics With Unity and the HTC Vive Part 1 作者:Eric Van de Kerckhove 译者:kmyhy VR 从来没 ...

  7. 第2课 C到C++的升级

    C与C++的关系: C++在C语言的基础上进行的升级最重要的是两个方面: 1.类型的加强,C++更称得上是高级语言,C++语言对于类型的检查更严格 2.面向对象的支持,天生支持面向对象软件开发方法学 ...

  8. WindowsXamlHost：在 WPF 中使用 UWP 控件库中的控件

    在 WindowsXamlHost:在 WPF 中使用 UWP 的控件(Windows Community Toolkit) 一文中,我们说到了在 WPF 中引入简单的 UWP 控件以及相关的注意事项 ...

  9. Python面试题（十六）

    1.取出两个升序数组中的最小的一半的元素组成一个新的升序数组. map(lambda x, y: x if x < y else y, a, b) 答案 2.用至少2种不同的方式删除一个list ...

  10. SSH学习之四 OpenSSH安全

             OpenSSH是Linux/Unix下一款加密通讯软件.同一时候也是我们用来远程控制Linux/Unixserver重要的必装软件. 对于各版本号的Linux及Unix发行版而言,O ...