<!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. 解决mysql安装报错：无法启动此程序，因为计算机丢失MSVCP120.dll

    问题一: 因为装的是新系统,所以遇到mysql启动报错:无法启动此程序,因为计算机丢失MSVCP120.dll 后来参考这篇文章https://blog.csdn.net/huacode/articl ...

  2. IIS网页GZIP压缩

    1.开GZIP有什么好处? 答:Gzip开启以后会将输出到用户浏览器的数据进行压缩的处理,这样就会减小通过网络传输的数据量,提高浏览的速度. 2.如何启用IIS的Gzip压缩功能: 答:首先,如果你需 ...

  3. 装载Properties资源文件的项目中使用

    ssm项目中打算将发短信的每小时每天的限定变成可配置的.于是将配置信息写在资源文件中,现在有两种方式加载资源文件,一个是使用spring注入方式,@Value注解注入,当然,前面需要在项目中装载.第二 ...

  4. FIS 的思想和优点

    资源表 各种性能优化算法的加载框架 依赖声明有助于组件化 资源自动合并 链接 与webpack对比

  5. test20181020 B君的第二题

    题意 分析 考场70分 一看就是裸的kmp,直接打上去. #include<cstdlib> #include<cstdio> #include<cmath> #i ...

  6. wpf 客户端【JDAgent桌面助手】业余开发的终于完工了。。晒晒截图

    目录区域: 业余开发的wpf 客户端终于完工了..晒晒截图 wpf 客户端[JDAgent桌面助手]开发详解-开篇 wpf 客户端[JDAgent桌面助手]详解(一)主窗口 圆形菜单... wpf 客 ...

  7. wpf 客户端【JDAgent桌面助手】开发详解-开篇

    上周二 发表了一个帖子:wpf 客户端[JDAgent桌面助手]业余开发的终于完工了..晒晒截图... 没有想到不到一个周时间已经浏览量过8千,估计过几天就过万了..很开心啊.. 评论中好多网友问我要 ...

  8. Centos下telnet的安装和配置

    Centos下telnet的安装和配置 首先为Centos配置地址(192.168.0.1/24) 一.查看本机是否有安装telnetrpm -qa | grep telnetrpm -q telne ...

  9. oracle行跟踪（基于行跟踪的ROWDEPENDENCIES ORA_ROWSCN信息）

    在Oracle 10g中的引入了ORA_ROWSCN伪列新特性.基于此种伪列所提供的信息,我们可以方便地找出某个数据块或某一个行最近被修改的时间戳.在默认情况下,10g下表会以非行依赖性(NOROWD ...

  10. 黄聪：C#程序中判断是否处在DEBUG调试状态或者RELEASE发布状态

    习惯了用老方式(注释的方式)来对程序进行调试,不过昨天才发现这样调试存在很大的隐患:在工程发布的时候如果忘记把该注释的代码注释掉,而让这些调试信息随工程一起发布,如果是可见的调试信息倒好发现,如果不是 ...