百度经验版本号：怎样用HTML5的FileReader生成Data Url

上一篇讲了：用Visual Studio 2010编写Data Url生成工具C#版

今天用HTML5 FileReader实现了一下Data Url生成工具，上代码吧：

<!DOCTYPE html

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

<head>

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

<title>怎样用HTML5的FileReader生成Data Url</title>

<meta name="keywords" content="Data Url,HTML5,FileReader"/>

<meta name="description" content="怎样用HTML5的FileReader生成Data Url"/>

<script type="text/javascript">

function buildDataUrl(source) {

	var file = source.files[0];

	if(window.FileReader) {

		var fr = new FileReader();

		fr.onloadend = function(e) {

			document.getElementById("txtBase64").value = e.target.result;

			document.getElementById("imgView").src = e.target.result;

		};

		fr.readAsDataURL(file);

	}

}

</script>

</head>

<body>

<p>怎样用HTML5的FileReader生成Data Url</p>

<input type="file" value="" onchange="buildDataUrl(this)" style="border:1px solid #808080; width:300px;" /><br />

<textarea id="txtBase64" cols="50" rows="20"></textarea>

<img id="imgView" src="" style="width:300px;" />

</body>

</html>

终于效果图：

Data Url生成工具之HTML5 FileReader实现的更多相关文章

  1. 使用Visual Studio 2010写Data Url生成工具C#版本

    声明:本文系本人按照真实经历原创.未经许可,谢绝转载. 此文百度经验版本号:怎样用Visual Studio 2010打造Data Url生成工具 源代码下载:用Visual Studio 2010编 ...

  2. HTML5——Data Url生成

    HTML5——Data Url生成 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

  3. 赞！jsPDF – 基于 HTML5 的强大 PDF 生成工具

    jsPDF 是一个基于 HTML5 的客户端解决方案,用于生成各种用途的 PDF 文档.使用方法很简单,只要引入 jsPDF 库,然后调用内置的方法就可以了.浏览器兼容性: IE 10, Firefo ...

  4. jsPDF – 基于 HTML5 的强大 PDF 生成工具

    jsPDF 是一个基于 HTML5 的客户端解决方案,用于生成各种用途的 PDF 文档. 使用方法很简单,只要引入 jsPDF 库,然后调用内置的方法就可以了. 米扑科技项目用到了HHTML5生成PD ...

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

    为什么80%的码农都做不了架构师?>>>   原理: 1.使用FileReader 读取图片的base64编码 2.使用ajax,把图片的base64编码post到服务器. 3.根据 ...

  6. [HTML5] FileReader对象

    写在前面 前一篇文章介绍了HTML5中的Blob对象(详情戳这里),从中了解到Blob对象只是二进制数据的容器,本身并不能操作二进制,故本篇将对其操作对象FileReader进行介绍. FileRea ...

  7. Data URL简介及Data URL的利弊

    之前写过一篇“漫谈前端优化”的文章,里面提到过DataUrl,粗鲁的描述了下,感觉不甚详焉,所以这几天也总结了这方面的知识,参考一些资料,补充一篇文章在这里,对这方面的资料来说,也是一种强化记忆应用: ...

  8. Ajax异步刷新地址栏url改变（利用Html5 history.pushState实现）

    早些时候在博客园参阅了不少资料,然后决定入驻博客园分享自己的开发心得,最近准备转方向筹备着辞职交接工作,所以有点忙碌,搁置了一个月才匆匆写下这么一篇随笔,希望能给大家带来一点帮助吧,资料和学识有限,如 ...

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

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

随机推荐

  1. JavaScript判断

    if...else: if...else语句是在指定的条件成立时执行的代码,在条件不成立时执行else后的代码. 语法: if(条件) {条件成立时执行的代码 }else{ 条件不成立的时执行的代码} ...

  2. HDU_1548_A strange lift

    题意:一部电梯(共top层),每一楼有一个数字k,在该层只能上k层或者下k层(up和down按钮),问从当前层到目标层按按钮的最小次数. 分析:广度优先搜索. 总结:初写BFS,仿照别人的代码,这方面 ...

  3. dom4j使用方法详解

    本文先做知识点的简单介绍,最后附完整案例. 一.解析XML文件 public class Foo { //url为XML文档地址 //自己封装了一个工具类 返回解析完成的document public ...

  4. ThinkPHP---thinkphp框架介绍

    目录: (1)简述: (2)下载: (3)文件结构: (4)部署: (5)细节问题: 主体: (1)简述 ThinkPHP诞生于2006年初,最初叫FSC.于2007年元旦更名为PHP,同时官网上线. ...

  5. 牛客多校Round 1

    Solved:1 rank:249 E. Removal dp i,j表示前i个数删除了j个且选择了第i个的答案 类似字符串的dp 预处理一下nex i_k即i后面k第一次出现的位置  就好转移了 # ...

  6. gym101343J. Husam and the Broken Present 2 (状压DP)

    题意:给定n个串 每个串长度不超过100 找到一个新串 使得这n个串都是它的字串 输出这个新串的最小长度 题解:n是15 n的阶乘的复杂度肯定不行 就想到了2的15次方的复杂度 想到了状压但是不知道怎 ...

  7. Day 14B 网络应用开发

    网络应用开发 发送电子邮件 在即时通信软件如此发达的今天,电子邮件仍然是互联网上使用最为广泛的应用之一,公司向应聘者发出录用通知.网站向用户发送一个激活账号的链接.银行向客户推广它们的理财产品等几乎都 ...

  8. C++ Primer(第4版)-学习笔记-第3部分：类和数据抽象

    第12章 类       每个类可以没有成员,也可以定义多个成员,成员可以是数据.函数或类型别名. 成员函数必须在类内部声明,可以在类内部定义,也可以在类外部定义.如果在类内部定义,就默认是内联函数. ...

  9. linux下Mongodb集群搭建：分片+副本集

    三台服务器 192.168.1.40/41/42 安装包 mongodb-linux-x86_64-amazon2-4.0.1.tgz 服务规划  服务器40  服务器41  服务器42  mongo ...

  10. Thunderbird and Gmail

    https://support.mozilla.org/en-US/kb/thunderbird-and-gmail