百度经验版本号：怎样用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. CNN结构：场景分割与Relation Network

    参考第一个回答:如何评价DeepMind最新提出的RelationNetWork 参考链接:Relation Network笔记  ,暂时还没有应用到场景中 LiFeifei阿姨的课程:CV与ML课程 ...

  2. golang 自定义time.Time json输出格式

    工作中使用golang时,遇到了一个问题.声明的struct含time.Time类型.使用json格式化struct时,time.Time被格式化成”2006-01-02T15:04:05.99999 ...

  3. SDK_列表控件的使用

    列表控件的使用 列表控件是通用控件,响应WM_NOTIFY 消息 主要包含了 4 种风格,我们学的是 report 风格 如何设置列表的扩展风格 LVS_EX_GRIDLINES: 列表拥有表格线 L ...

  4. [JSOI2012]玄武密码 题解(AC自动机)

    显然是AC自动机对吧 插入单词之后把文章在自动机上跑一遍,到达过的节点打上花火标记 之后检查一下每个单词有几个标记即可 可以把题目中的4个字母映射成abcd方便遍历 一定要记得把文章也映射啊! #in ...

  5. Vue指令7：v-model

    可以用 v-model 指令在表单控件元素上创建双向数据绑定. v-model 会忽略所有表单元素的 value.checked.selected 特性的初始值. 因为它会选择 Vue 实例数据来作为 ...

  6. 模板TemplateRef

    TemplateRef<void> <ng-template #模板名称></ng-template>

  7. CAD使用DeleteXData删除数据（网页版）

    主要用到函数说明: MxDrawEntity::DeleteXData 删除扩展数据,详细说明如下: 参数 说明 pzsAppName 删除的扩展数据名称,如果为空,删除所有扩展数据 js代码实现如下 ...

  8. 洛谷——P3389 【模板】高斯消元法

    P3389 [模板]高斯消元法 以下内容都可省略,直接转大佬博客%%% 高斯消元总结 只会背板子的蒟蒻,高斯消元是什么,不知道诶,看到大佬们都会了这个水题,蒟蒻只好也来切一切 高斯消元最大用途就是解多 ...

  9. LINUX-字符设置和文件格式转换

    dos2unix filedos.txt fileunix.txt 将一个文本文件的格式从MSDOS转换成UNIX unix2dos fileunix.txt filedos.txt 将一个文本文件的 ...

  10. Android 找不到资源的问题

    偶尔会遇到R.layout.***或R.id.***找不到资源的问题,明明在文件夹中有啊,那为什么嘞? 结合我自己遇到的情况和网上的资料,总结出以下几点可能的原因: 导入了android.R.这个是最 ...