加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
文件
克隆/下载
tobase64.html 2.24 KB
一键复制 编辑 原始数据 按行查看 历史
神者X奇迹 提交于 2021-05-07 10:12 . 更新base64小工具
<!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>
Loading...
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化