Data Url生成工具之HTML5 FileReader實現

時間 2019-11-11

標籤 data url 生成工具 html5 html filereader 實現欄目 HTTP/TCP 简体版

原文原文鏈接

百度經驗版本號：怎樣用HTML5的FileReader生成Data Urljavascript

上一篇講了：用Visual Studio 2010編寫Data Url生成工具C#版html

今天用HTML5 FileReader實現了一下Data Url生成工具，上代碼吧：java

<!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>

終於效果圖：