ovsexia-svg2css
/
tobase64.html

<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link rel="shortcut icon" href="#"/>
<title>文件转base64</title>
<style>
html {width:100%; height:100%; overflow:hidden; margin:0; padding:0;}
body {margin:15px; padding:0; word-break:break-all; overflow:hidden; text-align:center;}
body.active::before {font-size:38px; content:'点击选择文件\A或\A拖动文件到这里'; white-space:pre; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); color:#999;}
</style>
</head>
<body>

<body class="active">
<script>
function showPreview(source)
{
  let file = source.files[0];
  if(window.FileReader) {
    let fr = new FileReader();
    fr.onloadend = function(e){
      showresult(this.result);
    };
    fr.readAsDataURL(file);
  }
}

function showresult(result)
{
  document.body.insertAdjacentHTML('afterBegin', '<textarea id="textarea" style="width:100%; height:100%; min-height:500px; resize:none; box-sizing:border-box; outline:none;">' + result + '</textarea><button style="width:100%; height:40px; margin-top:15px; cursor:pointer;" onclick="location.reload()">返回</button>');
  document.getElementById('textarea').select();
  document.body.classList.remove('active');
}

window.addEventListener('dragenter', function(event) { event.preventDefault(); }, false);
window.addEventListener('dragover', function(event) { event.preventDefault(); }, false);
window.addEventListener('click', function(event){
  if(document.body.classList.contains('active') === true && event.target.nodeName !== 'BUTTON' && event.target.nodeName !== 'INPUT' && event.target.nodeName !== 'TEXTAREA'){
    let inputObj = document.createElement('input');
    inputObj.setAttribute('type', 'file');
    inputObj.setAttribute('value', '');
    inputObj.setAttribute('style', 'visibility:hidden');
    document.body.appendChild(inputObj);

    inputObj.addEventListener('change', function(e){
      showPreview(inputObj);
    }, false);
    inputObj.click();
  }
}, false);
window.addEventListener('drop', function(event){
  let reader = new FileReader();
  reader.onload = function(e){
    showresult(e.target.result);
  };
  reader.readAsDataURL(event.dataTransfer.files[0]);
  event.preventDefault();
}, false);
</script>

</body>
</html>