百度经验版本号：怎样用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. 【windows】自动化测试持续集成（CI）环境部署

    1. 环境准备 1.1 我的环境 1．Win10 64位 2．JDK 1.8.0_121 3．Tomcat 7.0.92 4. Jenkins 2.24 5．SVN-Server 3.8.1 1.2 ...

  2. WindowsForms获取服务名称

    StringBuilder sb = new StringBuilder(); ServiceController[] services = ServiceController.GetServices ...

  3. nginx反向代理与负载均衡讲解

    Nginx的代理功能与负载均衡功能是最常被用到的,关于nginx的基本语法常识与配置已在上篇文章中有说明,这篇就开门见山,先描述一些关于代理功能的配置,再说明负载均衡详细. Nginx代理服务的配置说 ...

  4. BZOJ5314: [Jsoi2018]潜入行动 (树形DP)

    题意:一棵树选择恰好k个结点放置监听器 每个监听器只能监听相邻的节点 问能使得所有节点被监听的种类数 题解:反正就是很well-known的树形DP了 至于时间复杂度为什么是nk 不会不学 很好想到四 ...

  5. swift 集成使用最新版百度地图_v2.10.2（一）

    目前在开发中使用百度地图的APP越来越多了,我在网上找的集成百度地图的例子不是很多,于是我就将我集成百度地图的过程记录了下来: 一.前提:安装CocoaPods sudo gem install co ...

  6. UVA-127 "Accordian" Patience（模拟）

    题目: 把52张牌从左到右排好,每张牌自成一个牌堆.当某张牌与它左边那张牌或者左边第三张牌匹配时(花色或者点数相同)时,就把这张牌移到那张牌上面. 移动之后还要查看是否可以进行其他移动.只有位于牌堆顶 ...

  7. Gym - 101550A（Artwork 倒序+并查集）

    题目: 思路: 1.对输入数据离线,先把所有的黑线都画出来,统计一下剩余的白色连通块的个数,dfs过程将一个连通块放到一个集合中. 2.倒着往前消去黑线,如果当前的块A是白块就看他的四周有没有白块:有 ...

  8. Python数据库连接池DBUtils（基于pymysql模块连接数据库）

    安装 pip3 install DBUtils DBUtils是Python的一个用于实现数据库连接池的模块. 此连接池有两种连接模式: # BDUtils数据库链接池: 模式一:基于threaing ...

  9. HTTP 请求的 GET 与 POST 方式的区别

    HTTP 请求的 GET 与 POST 方式的区别 在客户机和服务器之间进行请求-响应时,两种最常被用到的方法是:GET 和 POST. GET - 从指定的资源请求数据. POST - 向指定的资源 ...

  10. [luoguP1130] 红牌（DP）

    传送门 幼儿园DP. ——代码 #include <cstdio> #include <iostream> ; << ); int a[MAXN][MAXN], f ...