百度经验版本号：怎样用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. 【sqli-labs】 对于less34 less36的宽字节注入的一点深入

    1.AddSlashes() 首先来观察一下是如何通过构造吃掉转义字符的 先将less 34的网页编码换成gbk 加上一些输出 echo "Before addslashes(): &quo ...

  2. 扩增子分析解读6进化树 Alpha Beta多样性

    分析前准备 # 进入工作目录 cd example_PE250 上一节回顾:我们的OTU获得了物种注释,并学习OTU表的各种操作————添加信息,格式转换,筛选信息.   接下来我们学习对OTU序列的 ...

  3. JS的filter用法

    filter也是一个常用的操作,它用于把Array的某些元素过滤掉,然后返回剩下的元素. 和map()类似,Array的filter()也接收一个函数.和map()不同的是,filter()把传入的函 ...

  4. 并查集（Union Find）的基本实现

    概念 并查集是一种树形的数据结构,用来处理一些不交集的合并及查询问题.主要有两个操作: find:确定元素属于哪一个子集. union:将两个子集合并成同一个集合. 所以并查集能够解决网络中节点的连通 ...

  5. Oracle中的COALESCE,NVL,NVL2,NULLIF函数

    http://jingyan.baidu.com/article/fa4125acaf898e28ac7092b9.html

  6. 暴力搜索+散列--P1008 三连击

    题目描述 将1,2, ⋯,9共9个数分成3组,分别组成3个三位数,且使这3个三位数构成1:2:3的比例,试求出所有满足条件的3个三位数. 输入输出格式 输入格式: 木有输入 输出格式: 若干行,每行3 ...

  7. Qt 如何处理密集型耗时的事情

    有时候需要处理一些跟界面无关的但非常耗时的事情,这些事情跟界面在同一个线程中,由于时间太长,导致界面无法响应,处于“假死”状态.例如:在应用程序中保存文件到硬盘上,从开始保存直到文件保存完毕,程序不响 ...

  8. 带你全面分析嵌入式linux系统启动过程中uboot的作用

    资料链接:http://mp.weixin.qq.com/s/rYVchD-xy7Bdkc1O3fW2Wg

  9. 在 Oculus和 Gear VR上开发跨平台的 VR应用

    本文章由cartzhang编写,转载请注明出处. 所有权利保留. 文章链接:http://blog.csdn.net/cartzhang/article/details/51433994 作者:car ...

  10. Ajax学习总结（2）——Ajax参数详解及使用场景介绍

    一.定义和用法 AJAX即"Asynchronous Javascript And XML"(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术. AJA ...