Baseline Widely available
Hinweis: Diese Funktion ist in Web Workers verfügbar.
Die readAsDataURL()
Methode der FileReader
Schnittstelle wird verwendet, um den Inhalt des angegebenen Blob
oder File
zu lesen. Wenn der Lesevorgang abgeschlossen ist, wird die readyState
Eigenschaft zu DONE
, und das loadend
Ereignis wird ausgelöst. Zu diesem Zeitpunkt enthält das result
Attribut die Daten als data: URL, die die Daten der Datei als Base64-codierten String darstellt.
Hinweis: Das result
des Blobs kann nicht direkt als Base64 dekodiert werden, ohne zuerst die Data-URL-Deklaration vor den Base64-codierten Daten zu entfernen. Um nur den Base64-codierten String zu erhalten, entfernen Sie zuerst data:*/*;base64,
aus dem Ergebnis.
Keiner (undefined
).
<input type="file" /><br />
<img src="" height="200" alt="Image preview" />
JavaScript
const preview = document.querySelector("img");
const fileInput = document.querySelector("input[type=file]");
fileInput.addEventListener("change", previewFile);
function previewFile() {
const file = fileInput.files[0];
const reader = new FileReader();
reader.addEventListener(
"load",
() => {
// convert image file to base64 string
preview.src = reader.result;
},
false,
);
if (file) {
reader.readAsDataURL(file);
}
}
Ergebnis Lesen mehrerer Dateien HTML
<input id="browse" type="file" multiple />
<div id="preview"></div>
JavaScript
function previewFiles() {
const preview = document.querySelector("#preview");
const files = document.querySelector("input[type=file]").files;
function readAndPreview(file) {
// Make sure `file.name` matches our extensions criteria
if (/\.(?:jpe?g|png|gif)$/i.test(file.name)) {
const reader = new FileReader();
reader.addEventListener(
"load",
() => {
const image = new Image();
image.height = 100;
image.title = file.name;
image.src = reader.result;
preview.appendChild(image);
},
false,
);
reader.readAsDataURL(file);
}
}
if (files) {
Array.prototype.forEach.call(files, readAndPreview);
}
}
const picker = document.querySelector("#browse");
picker.addEventListener("change", previewFiles);
Ergebnis Spezifikationen Browser-Kompatibilität Siehe auch MDN-Feedback-Box War diese Ãbersetzung hilfreich?
Diese Seite wurde automatisch aus dem Englischen übersetzt.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4