本文介绍如何利用HTML5的FileReader API生成Data Url，并提供了代码示例。
今天用HTML5 FileReader实现了一下Data Url生成工具，上代码吧：
[html] view plaincopy
-
<!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>
最终效果图：
扫一扫
2037
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
