简单的html5 readAsDataURL img和base64互相转换
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
??? <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
??? <title>簡單的html5 readAsDataURL img和base64互相轉(zhuǎn)換</title>
</head>
<body>
<input type="file" value="" id="file_input"/><br/>
<textarea id="result" rows="10" cols="100"></textarea><br/>
輸入base64碼<input? id="inputBase" type="text">
<button id="showImg">顯示圖片</button><br/>
<img>
<script>
??? window.onload = function () {
??????? var file_input = document.getElementById( "file_input" ),
??????????????? result = document.getElementById( "result" ),
??????????????? inputBase=document.getElementById( "inputBase" ),
??????????????? showImg=document.getElementById( "showImg" );
??????? function readFile() {
??????????? var file = this.files[0];
??????????? var reader = new FileReader();
??????????? reader.readAsDataURL( file );
??????????? reader.onload = function ( e ) {
??????????????? result.innerHTML= this.result;
??????????? }
??????? }
??????? if ( typeof(FileReader) === 'undefined' ) {
??????????? result.innerHTML = "抱歉，你的瀏覽器不支持 FileReader，請使用現(xiàn)代瀏覽器操作！";
??????????? file_input.setAttribute( 'disabled', 'disabled' );
??????? }
??????? else {
??????????? file_input.addEventListener( 'change', readFile, false );
??????? }
??????? showImg.addEventListener( 'click', function(){
??????????? debugger;
??????????? document.querySelector("img" ).src=inputBase.value;
??????? }, false );
??? };
</script>
</body>
</html>
轉(zhuǎn)載于:https://www.cnblogs.com/zodiacblog/p/3998183.html
總結(jié)
以上是生活随笔為你收集整理的简单的html5 readAsDataURL img和base64互相转换的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Android: 启动另外的APP及传递
- 下一篇： Swipe JS – 移动WEB页面内容