本文主要是介绍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="" ο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>
这篇关于Data Url生成工具之HTML5 FileReader实现的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
