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属性,保存着文件的相关信息 ...
随机推荐
- java并发编程：线程安全管理类--原子操作类--AtomicInteger
在java并发编程中,会出现++,--等操作,但是这些不是原子性操作,这在线程安全上面就会出现相应的问题.因此java提供了相应类的原子性操作类. 1.AtomicInteger
- 转载 Linux top命令详解
TOP命令是Linux下常用的性能分析工具,能够实时显示系统中各个进程的资源占用状况. TOP是一个动态显示过程,即可以通过用户按键来不断刷新当前状态.如果在前台执行该命令,它将独占前台,直到用户终止 ...
- 055——VUE中vue-router之路由参数的随意设置与伪静态链接地址处理：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue.js 源代码学习笔记 ----- codegenEvents.js
/* @flow */ const fnExpRE = /^\s*([\w$_]+|\([^)]*?\))\s*=>|^function\s*\(/ const simplePathRE = / ...
- 经典排序方法 python
数据的排序是在解决实际问题时经常用到的步骤,也是数据结构的考点之一,下面介绍10种经典的排序方法. 首先,排序方法可以大体分为插入排序.选择排序.交换排序.归并排序和桶排序四大类,其中,插入排序又分为 ...
- 實驗項目wordcount
wordcount 1.设计思路 第一步 :主函数参数使用命令行参数,定义一个文件指针fp. 第二步:判断能否用只读的形式打开命令行指针中的文件,并让指针指向打开函数,若不能则输出不能读取文件,否则下 ...
- 每天一个linux命令（性能、优化）：【转载】lsof命令
lsof(list open files)是一个列出当前系统打开文件的工具.在linux环境下,任何事物都以文件的形式存在,通过文件不仅仅可以访问常规数据,还可以访问网络连接和硬件.所以如传输控制协议 ...
- 如何在idea中使用Mybatis-generator插件快速生成代码
传送门 使用这个插件可以快速生成一些代码,包含 实体类/Mapper接口/*Mapper.xml文件 首先,我们需要搭建一个Maven的项目. 在pom.xml中添加代码 <plugins> ...
- Convex 一道阿姆斯特朗回旋好题
2001年5月8日,阿姆斯特朗(Armstrong, 1929-2013) 教授发明了一种名为“阿姆斯特朗回旋加速喷气式阿姆斯特朗加密”的加密算法,算法从未公开,直至2013阿姆斯特朗教授逝世后,其生 ...
- java 8 新特性之Stream的排序/分类
Stream简介 Stream是Java8提供的一个新的API,它位于java.util.stream包下.Stream API提供了一种新的方式来对Java集合进行操作,这种操作方式极大的提高了Ja ...