前端开发者| 前端开发新手 软件 |
| 软件开发前端教学视频教程 |
| 前端开发软件介绍说明 |
html 代码
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″ />
<title></title>
</head>
<body>
选择图片： <input type=”file” id=”img” />
<button id=”start”>开始转换</button>
<div>预览：<img id=”imgShow” src=”” alt=”” /></div>
<b>Base64数据：</b>
<textarea rows=”15″ cols=”60″ id=”conte”></textarea>
<button id=”cpData”>复制</button><span id=”succ”></span>
<div id=”len”>数据长度：</div>
<script>
var img = document.getElementById(‘img’),
imgShow = document.getElementById(‘imgShow’),
conte = document.getElementById(‘conte’),
len = document.getElementById(‘len’),
start = document.getElementById(‘start’),
cpData = document.getElementById(‘cpData’)
cpData.addEventListener(‘click’, cpDataF)
start.addEventListener(‘click’, startt)
/*转换函数*/
function startt() {
var imgFile = new FileReader()
imgFile.readAsDataURL(img.files[0])
imgFile.onload = function() {
var imgData = this.result //base64数据
imgShow.setAttribute(‘src’, imgData)
conte.value = imgData
len.innerHTML += imgData.length
}
}
/*复制数据*/
function cpDataF() {
conte.select() // 选择对象
var cpd = document.execCommand(‘Copy’) // 执行浏览器复制命令
cpd
? (document.getElementById(‘succ’).innerHTML = ‘复制成功’)
: console.warn(‘复制失败’)
window.setTimeout(function() {
document.getElementById(‘succ’).innerHTML = ”
}, 1000)
}
</script>
</body>
</html>
| 深圳软件前端开发培训 |
| 前端用的开发软件下载 |
| mac下前端开发软件 |
970106_lzh 2年前 (2021-01-08)说：
huihui 3年前 (2020-10-20)说：
Satisfy 3年前 (2020-06-05)说：
评论前必须登录！
注册