<!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. hdu4686矩阵快速幂

    花了一个多小时终于ac了,有时候真的是需要冷静一下重新打一遍才行. 这题就是 |aod(n)|   =    |1        ax*bx       ax*by      ay*bx       ...

  2. web sql 基本操作 - 增删改查

    不喜欢看md原文的 可以访问这个链接:http://note.youdao.com/noteshare?id=6a91e3dea7cdf5195bb0e851d9fcb5a5 # web sql 增删 ...

  3. echarta3 北京,上海地图

    1.首先你得到echarts官网下载js,建议下载完整代码,这样你就很容易根据我的路径找到beijing.js 2.把echarts.js和beijingi.js根据你的路径引对,然后就可以copy我 ...

  4. activity+fragment+listview+adapter+bean在同一个类中的套路

    1.xml activity_main.xml <?xml version="1.0" encoding="utf-8"?><FrameLay ...

  5. 二叉树的前序、中序、后序遍历 python

    话不多说,直接上代码 class TreeNode: def __init__(self, x): self.val = x self.left = None self.right = None cl ...

  6. 《DSP using MATLAB》Problem 2.18

    1.代码: function [y, H] = conv_tp(h, x) % Linear Convolution using Toeplitz Matrix % ----------------- ...

  7. test20181019 B君的第一题

    题意 分析 考场做法同标解. 画图模拟分析发现,无论操作顺序怎样,操作数的奇偶性是不变的. 所以等同求出,以每点为根的操作数奇偶性. 用\(f(x)\)表示x及其子树中的边,包括x到它fa的边,将他们 ...

  8. 494 - Kindergarten Counting Game

     Kindergarten Counting Game  Everybody sit down in a circle. Ok. Listen to me carefully. ``Woooooo, ...

  9. Linux下驱动模块学习

    1.modutils中提供了相关的insmod,rmmod,modinfo工具2.modprobe在识别出目标模块所依赖模块后也是调用insmod.3.从外部看模块只是普通可重定位的目标文件.可重定位 ...

  10. Spring4中@value用法详解

    版本:spring-framework-4.1 一.概述 为了简化读取properties文件中的配置值,Spring支持@Value注解的方式来获取,这种方式大大简化了项目的配置,业务中也提高了灵活 ...