Data Url生成工具之HTML5 FileReader实现
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Data Url生成工具之HTML5 FileReader实现相关的知识，希望对你有一定的参考价值。
百度经验版本号：怎样用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实现的主要内容，如果未能解决你的问题，请参考以下文章