本篇文章给大家介绍的内容是关于如何使用FileReader对象获取图片base64代码并预览 ，有需要的朋友可以参考一下。
用FileReader获取图片base64，并在页面预览：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!-- 上传图片的input 绑定onchange事件-->
<form action="">
<input type="file" onchange="previewFile()" name="myfile" multiple="multiple"><br>
</form>
<!-- 预览的图片 -->
<img src="" height="200" width="300" alt="Image preview..."/>
<script type="text/javascript">
function previewFile() {
var preview = document.querySelector('img');
// 选中file元素，并访问其files属性的第一个值
var file = document.querySelector('input[type=file]').files[0];
// console.log(document.querySelector('input[type=file]').files);
// console.log(document.querySelector('input[type=file]').files[0]);
var reader = new FileReader();
// 处理loadend事件，该事件在读取操作结束时（要么成功，要么失败）触发
reader.onloadend = function () {
console.log(reader.result)
preview.src = reader.result;
}
// 读取指定的Blob中的内容，一旦完成，result属性中将包含一个data: URL格式的字符串以表示所读取文件的内容。
reader.readAsDataURL(file);
}
</script>
</body>
</html>相关推荐：
Atas ialah kandungan terperinci 如何使用FileReader对象获取图片的代码. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
java mengkonfigurasi pembolehubah persekitaran jdk
Penyelesaian untuk kegagalan muat turun win10
apa itu xfce
Kedudukan penyedia perkhidmatan CDN asing
css menetapkan warna teks
Apakah maksud pycharm apabila berjalan secara selari?
Bagaimana untuk membaca data dalam fail excel dalam python
Bagaimana untuk menyelesaikan masalah apabila suhu CPU komputer terlalu tinggi
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
