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>最终效果图:
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。