百度经验版本号：怎样用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. CAD把当前图形保为一个jpg文件（com接口Delphi语言）

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 procedure TForm2.Button1Click(Sender: TObje ...

  2. MxCAD5.2 20180726更新

    下载地址: http://www.mxdraw.com/ndetail_105.html 1. 增加属性匹配功能 2. 增加List命令 3. 增加CAD图纸审图批注功能 4. 环形阵列功能

  3. php redis使用 常用方法

    基本 $redis = new Redis();//创建对象 $redis->connect('127.0.0.1',6379);//建立连接 $redis->delete('test') ...

  4. for 循环新的写法==列表解析

    1. (for x in L1) 是一个可迭代对象: 2. 列表解析比for 循环快,列表解析的迭代在解释器内部是以C语言速度执行, 而不是手动python代码执行: (x+10 for x in L ...

  5. hdu 1754 I Hate It(线段树水题）

    >>点击进入原题测试<< 思路:线段树水题,可以手敲 #include<string> #include<iostream> #include<a ...

  6. LA 3029 Subsequence

    LA 3029 A sequence of N positive integers (10 < N < 100 000), each of them less than or equal ...

  7. PAT 1121 Damn Single

    "Damn Single (单身狗)" is the Chinese nickname for someone who is being single. You are suppo ...

  8. vue.js组件之间的通讯-----父亲向儿子传递数据，儿子接收父亲的数据

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. Remmarguts’ Date（poj 2449）

    求第k短路的长度,如果没有,输出-1. /* k短路模板 注意当s=t时,k++. */ #include<iostream> #include<cstdio> #includ ...

  10. tyvj1271 零式求和

    描述 请考虑一个由1到N(N=3, 4, 5 ... 9)的数字组成的递增数列:1 2 3 ... N.现在请在数列中插入“+”表示加,或者“-”表示减,抑或是“ ”表示空白(例如1-2 3就等于1- ...