HTML5——Data Url生成
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8" />
<title>如何用HTML5的FileReader生成Data Url</title> <script type="text/javascript">
function imageDataUrl(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" onchange="imageDataUrl(this)" style="border:1px solid #808080; width:432px;" />
<br />
<textarea id="txtBase64" cols="50" rows="20"></textarea>
<img id="imgView" src="" style="width:400px;height: 400px;" />
</body> </html>