Heim > Artikel > Web-Frontend > So verwenden Sie das FileReader-Objekt, um den Code des Bildes abzurufen
So verwenden Sie das FileReader-Objekt, um den Code des Bildes abzurufen
- 不言Original
- 2018-07-18 17:29:301692Durchsuche
In diesem Artikel erfahren Sie, wie Sie mit dem FileReader-Objekt den Base64-Code des Bildes abrufen und in der Vorschau anzeigen können.
Verwenden Sie FileReader, um das Bild base64 abzurufen und es auf der Seite in der Vorschau anzuzeigen:
<!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>Verwandte Empfehlungen:
FileReader in JS implementiert das Bild Upload-Vorschau
FileReader implementiert eine lokale Vorschau vor dem Hochladen von Bildern
Das obige ist der detaillierte Inhalt vonSo verwenden Sie das FileReader-Objekt, um den Code des Bildes abzurufen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：js-Code zur Implementierung der DatumsauswahlNächster Artikel：js-Code zur Implementierung der Datumsauswahl