Data Url生成工具之HTML5 FileReader实现

最新推荐文章于 2021-02-24 14:40:36 发布
最新推荐文章于 2021-02-24 14:40:36 发布
阅读量8.2k 收藏 5
点赞数 3
分类专栏： HTML5 文章标签： Data Url base64 javascript html5 img
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/testcs_dn/article/details/30234759
版权

百度经验版本：如何用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="" οnchange="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>
最终效果图：






微wx笑
关注
  • 3
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML5图片dataURL转换工具.zip
07-04
HTML5图片dataURL转换工具，可将图片转成dataURL，或者将dataURL转回图片。使用html5 filereader方法，挺实用的工具，收藏放电脑，以后不用再找在线工具了。
HTML5——Data Url生成
weixin_30642305的博客
08-11 118
HTML5——Data Url生成 1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="utf-8" /> 6 <title>如何用HTML5的FileReader生成Data Url</title&...
FileReader生成图片dataurl的分析
peterzhangsnail的博客
06-11 1091
文章目录相关代码及html(来源:百度百科)File API及FileReader简介结合补充知识进行代码分析修改尝试: 拖曳图片到网页完成转换 原文地址:https://www.cnblogs.com/peterzhangsnail/p/11006163.html] 相关代码及html(来源:百度百科) <!DOCTYPE html> <html lang="zh-CN"&gt...
JavaScript+html5 canvas实现本地截图教程
11-22
首先，获取文件并读取文件生成URL是通过HTML5的File API实现的。FileReader对象的`readAsDataURL`方法可以将文件读取为一个data URL，这个URL可以直接在浏览器中显示图片。例如： ```javascript document....
基于javascript html5实现多文件上传_.docx
10-09
`FileReader`接口是HTML5提供的用于读取文件内容的关键工具，它支持将文件读取为不同的数据类型，如`DataURL`（base64编码）。在`readFile`函数中，我们可以对每个选中的文件调用`FileReader`的`readAsDataURL`方法...
html生成图片
12-13
例如，我们可以使用JQuery选择器找到图片元素，然后用`.attr()`方法设置或获取其`src`属性，从而实现图片的加载和Base64转换。 以下是一个简单的示例，展示了如何使用JQuery和Canvas生成图片： ```javascript $...
jQuery实现图片嵌入表单.zip_jQuery实现图片嵌入表单
09-24
这段代码创建了一个FileReader对象，当文件读取完成后，生成一个数据URL，该URL可以用于设置图像元素的`src`属性，从而在页面上显示预览。 3. 考虑到表单提交，我们需要处理图片数据。通常，我们会使用Ajax将图片...
Blob、File、FileReader 和 Data URL
huangpb的博客
02-06 3514
一、Blob 对象 Blob，全称 Binary Large Object，代表二进制类型的大对象。在Web领域，Blob对象表示一个不可变、二进制原始数据的类文件对象，因此可以像操作文件对象一样操作Blob对象。File 接口基于Blob，继承了 Blob 的功能并将其扩展使其支持用户系统上的文件。 一、Blob基本用法 1. 创建Blob对象 生成Blob对象有两种方法： 使用Blo...
com.tencent.qqpimsecure.plugin.alice9000901.jar
05-01
com.tencent.qqpimsecure.plugin.alice9000901.jar
# 关于DataURL Blob File FileReader createObjectURL canvas及其相互转化
小花魁的博客
11-30 1418
关于DataURL Blob File FileReader createObjectURL canvas及其相互转化标签（空格分隔）： js文件处理关于DataURL Blob File FileReader createObjectURL canvas及其相互转化DataURL 传统的img标签是通过引入服务器上的图片资源，浏览器对每个这样的img标签都会向服务器发送一个
jQuery File Upload 单页面多实例的实现
weixin_33749242的博客
06-17 497
jQuery File Upload 的 GitHub 地址：https://github.com/blueimp/jQuery-File-Upload 插件描述：jQuery File Upload 是一个 jQuery 图片上传组件，支持多文件上传、取消、删除，上传前缩略图预览、列表显示图片大小，支持上传进度条显示。插件基于开放的标准，如 HTML5 和 JavaScript ，不需要额外的...
web端 上传图片 到服务器保存【不同方式 ：javaweb、nodejs、django】
程序员战胜
02-24 1506
实例方式一：Nodejs方式二：Javaweb方式三：Javaweb四、Django 方式一：Nodejs 前端代码： <input type="file" name="" id="file"> <button onclick="doUpload()">上传文件</button> <img src="" alt="" id="img"> <script> function doUpload(){ let file = $
JSP页面编码设置
03-19 1061
我们都知道JSP其实就是Servlet，因为显示JSP之前，服务器都会将JSP先转换为相应的Servlet代码，在_jspService方法中执行输出语句，然后通过浏览器展示，那么就涉及到编码问题
HTML中，content="text/html; charset=gb2312"；XML中 encoding="UTF-8"。其实都是指的 “程序员告诉别人，我的此html文档所使用的字符编码，但是
热门推荐
溺水三千只取一瓢饮
05-09 1万+
HTML中，content="text/html; charset=gb2312"；XML中 encoding="UTF-8"   其实都是指的 “编码集，而不是字符集”，即指的“如何对字符进行编码；而不是目前使用何种字符集”，更确切的讲 指的 “程序员告诉别人，我的此htm
人脸识别系统_人脸注册
cc_百川
03-21 5274
    基于上次的人脸检测后，一直纠结人脸注册，照片存放方式，我想到了两种方式，1.数据库存照片存放的路径，2.数据库存放照片的二进制码。但是针对我的毕业设计我想要是存路径的话，万一一不小心图片删除了，岂不是很麻烦，也就是我觉得要是系统迁移的话容易数据丢失（小白想法，其实正常情况下都是直接存的图片路径）。直接存照片的话数据库压力，开销等都比较大。所以最终小白还是选择了存图片路径的方式。     ...
[Scala基础]--调用url获取返回值
欢迎来到我的博客，一起探索代码里的世界！
12-14 4664
在Scala编程中，常常会用到调用第三方接口，获取返回值(文件内容是字符类型，或者返回的是字符串)，那么使用Scala自带的Scala.io.Source类，将非常方便。举例如下：  1、url="http://localhost:9008/services/user/getSampleValue"  2、返回值：有两种       (1)字符串："{"status":"1","timestamp...
filereader html5
最新发布
07-27
HTML5中的FileReader是一个用于读取文件内容的JavaScript API。它提供了一些方法和事件，使开发者能够以异步方式读取本地计算机上的文件，并且可以对文件进行操作。 要使用FileReader，首先创建一个FileReader对象，然后通过调用其方法来读取文件内容。以下是一个使用FileReader读取文本文件的示例： ```html <!DOCTYPE html> <html> <head> <title>FileReader Example</title> </head> <body> <input type="file" id="fileInput"> <div id="fileContent"></div> <script> document.getElementById('fileInput').addEventListener('change', function(e) { var file = e.target.files[0]; var reader = new FileReader(); reader.onload = function(e) { var contents = e.target.result; document.getElementById('fileContent').innerText = contents; }; reader.readAsText(file); }); </script> </body> </html> ``` 在这个例子中，我们创建了一个文件输入元素（`<input type="file">`），当用户选择文件后，触发change事件。然后我们获取用户选择的文件对象，并创建一个FileReader实例。 通过为reader的`onload`事件绑定一个回调函数，当文件读取完成后，该回调函数将被调用。在回调函数中，可以通过`e.target.result`获取文件的内容，并将其显示在页面上。 这只是FileReader的基本用法之一，你还可以使用其他方法来读取不同类型的文件（如二进制文件、图片等）。希望这能回答你的问题！如果你还有其他问题，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值