前端开发image转base64位、blob对象
摘要： 前端开发和javaee java前端开发网页 数据库 java数据库前端开发 html 代码 <!DOCTYPE html> <html> <head> <meta charset=”UTF-8″ /> <……
| 前端开发和javaee |
| java前端开发网页 数据库 |
| java数据库前端开发 |
html 代码
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″ />
<title></title>
<style type=”text/css”>
.imgup,
.imgblob {
width: 400px;
position: relative;
float: left;
}
.imgup > p > img,
.imgblob > p > img {
width: 300px;
}
#f,
#blobinput {
position: absolute;
width: 100px;
height: 40px;
top: 0;
left: 0;
opacity: 0;
cursor: pointer;
}
.upload,
.blobup {
width: 100px;
height: 40px;
cursor: pointer;
}
</style>
<script type=”text/javascript”>
//img转base64位
function change() {
var pic = document.getElementById(‘preview’),
file = document.getElementById(‘f’)
html5Reader(file)
}
function html5Reader(file) {
var file = file.files[0]
var reader = new FileReader()
reader.readAsDataURL(file)
reader.onload = function(e) {
var pic = document.getElementById(‘preview’)
pic.src = this.result
}
}
//img转blob对象
function changes() {
blobs()
}
function blobs() {
var file = document.getElementById(‘blobinput’)
var fileList = file.files
console.log(fileList)
var imgUrl = window.URL.createObjectURL(fileList[0])
var pic = document.getElementById(‘blobview’)
pic.src = imgUrl
}
</script>
</head>
<body>
<div class=”imgup”>
<input
id=”f”
type=”file”
name=”f”
onchange=”change()”
accept=”image/jpeg,image/jpg,image/png”
/>
<div class=”upload”>img-base64位上传图片</div>
<p>base64位预览:</p>
<p>
<img id=”preview” alt=”” name=”pic” />
</p>
</div>
<div class=”imgblob”>
<input
id=”blobinput”
type=”file”
name=”f”
onchange=”changes()”
accept=”image/jpeg,image/jpg,image/png”
/>
<div class=”blobup”>img-blob对象上传图片</div>
<p>blob对象预览:</p>
<p>
<img id=”blobview” alt=”” name=”pic” />
</p>
</div>
</body>
</html>
| java前端开发技术有哪些 |
| java开发想转前端 |
| java前端小项目开发 |
» 本文来自：前端开发者 » 《前端开发image转base64位、blob对象》
» 本文链接地址：https://www.rokub.com/8147.html
» 您也可以订阅本站：https://www.rokub.com
近期评论