代码拉取完成,页面将自动刷新
<!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>
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。