html5 filereader 读取图片信息
<!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 读取图片信息的更多相关文章
- HTML5 FileReader读取Blob对象API详解
使用FileReader对象,web应用程序可以异步的读取存储在用户计算机上的文件(或者原始数据缓冲)内容,可以使用File对象或者Blob对象来指定所要读取的文件或数据.其中File对象可以是来自用 ...
- html5 filereader读取流注意事项
对于截取读入的文件,一定要new FileReader,不可写全局调用同一个reader. 错误代码!!!function readAsBinaryString(file,callback){ rea ...
- HTML5 文件域+FileReader 读取文件(一)
在HTML5以前,HTML的文件上传域的功能具有很大的局限性,这种局限性主要体现在如下两点: 每次只能选择一个文件进行上传 客户端代码只能获取被上传文件的文件路径,无法访问实际的文件内容 一.File ...
- 使用html5 FileReader获取图片，并异步上传到服务器(不使用iframe)
使用html5 FileReader获取图片,并异步上传到服务器(不使用iframe) 原理: 1.使用FileReader 读取图片的base64编码 2.使用ajax,把图片的base64编码 ...
- FileReader读取文件详解
FileReader是一种异步文件读取机制,结合input:file可以很方便的读取本地文件. input:file 在介绍FileReader之前,先简单介绍input的file类型. <in ...
- FileReader读取文件
前言:FileReader是一种异步文件读取机制,结合input:file可以很方便的读取本地文件. input:file 在介绍FileReader之前,先简单介绍input的file类型. < ...
- 通过HTML5 FileReader实现上传图片预览功能
原文:http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201706224590.html 在上传图片到服务器之前,我们希望可以预览一下要上传的图片. ...
- 使用html5 FileReader获取图片，并异步上传到server(不使用iframe)
使用html5 FileReader获取图片,并异步上传到server(不使用iframe) 原理: 1.使用FileReader 读取图片的base64编码 2.使用ajax.把图片的base64编 ...
- HTML5 文件读取
一.定义 input的file类型会渲染为一个按钮和一段文字.点击按钮可打开文件选择窗口,文字表示对文件的描述(大部分情况下为文件名):file类型的input会有files属性,保存着文件的相关信息 ...
随机推荐
- UVA-1610 Party Games （构造）
题目大意:给出一系列字符串,构造出一个字符串大于等于其中的一半,小于另一半. 题目分析:取大小为中间的两个a,b(a<b).实际上就是找出第一个小于b的同时大于等于a的字符串,直接构造即可.要注 ...
- jspf、jsp小记
jsp页面:
- cdq分治的小结
cdq分治 是一种特殊的分治 他的思想: 1.分治l,mid 2.分治mid+1,r 3.计算l,mid对mid+1,r的影响 3就是最关键的地方 这也是cdq的关键点 想到了这一步基本就可以做了 接 ...
- android中LayoutInflater.from(context).inflate的分析
在应用中自定义一个view,需要获取这个view的布局,需要用到 (LinearLayout) LayoutInflater.from(context).inflate(R.layout.conten ...
- 使用java.net.URLConnection发送http请求
首先,这个需要一点HTTP基础,可以先看个书了解下,我看的<http权威指南>的前4章,后面道行不够看不下去. 然后我们的是java.net的接口: 几个类的API: package co ...
- Linux软件包安装(rpm、yum、apt-get)
转载自:https://blog.csdn.net/wzq__janeGreen_/article/details/81774924 rpm/yum适用于Redhat.CentOS.Suse等平台: ...
- 关于cookie和session的使用和理解
由于项目需要,最近用session容器比较多,传载的同时加上了自己的一些理解,不足之处还请大家补充和纠正. 一.cookie机制和session机制的区别 ********************** ...
- Android 开发有哪些新技术出现？
这里记录一下在知乎回答的<Android 开发有哪些新技术出现?>.知乎链接在这里. 原问题如下: Android 开发有哪些新技术出现?可以从UI设计或者一些核心的算法之类的说起 这是我 ...
- 【转】pycharm的一些快捷键
最近在学着用GA来做游戏的自动化,然后有用到pycharm来做一些脚本的编辑和试调.然后在试调时进行多行注释一行一行来感觉有点儿麻烦,然后就想着pycharm有没有多行注释的快捷方式.. 然后在网上查 ...
- 在WPF中使用CefSharp嵌入浏览器（转）
在WPF中使用CefSharp嵌入浏览器 日常开发中,我们需要将一些Web页面嵌入到桌面客户端软件中.下面我们使用CefSharp嵌入浏览器来实现. 首先先介绍一下CefSharp嵌入式浏览器,它 ...