Blob: type-Eigenschaft

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Hinweis: Diese Funktion ist in Web Workers verfügbar.

Die schreibgeschützte type-Eigenschaft des Blob-Interfaces gibt den MIME-Typ der Datei zurück.

Hinweis: Basierend auf der aktuellen Implementierung lesen Browser den Bytestream einer Datei nicht, um den Medientyp zu bestimmen. Er wird basierend auf der Dateiendung angenommen; eine PNG-Bilddatei, die in .txt umbenannt wurde, würde "text/plain" und nicht "image/png" liefern. Darüber hinaus ist blob.type im Allgemeinen nur für gängige Dateitypen wie Bilder, HTML-Dokumente, Audio und Video zuverlässig. Unübliche Dateiendungen würden einen leeren String zurückgeben. Die Konfiguration des Clients (zum Beispiel die Windows-Registry) kann sogar bei gängigen Typen zu unerwarteten Werten führen. Entwickler werden darauf hingewiesen, sich nicht ausschließlich auf diese Eigenschaft als Validierungsschema zu verlassen.

Wert

Ein String, der den MIME-Typ der Datei enthält, oder ein leerer String, wenn der Typ nicht bestimmt werden konnte.

Beispiele

Dieses Beispiel bittet den Benutzer, eine Anzahl von Dateien auszuwählen, und überprüft dann jede Datei, um sicherzustellen, dass sie zu einer bestimmten Menge von Bilddateitypen gehört.

HTML

html
<input type="file" id="input" multiple />
<output id="output">Choose image files…</output>

JavaScript

js
// Our application only allows GIF, PNG, and JPEG images
const allowedFileTypes = ["image/png", "image/jpeg", "image/gif"];

const input = document.getElementById("input");
const output = document.getElementById("output");

input.addEventListener("change", (event) => {
  const files = event.target.files;

  if (files.length === 0) {
    output.innerText = "Choose image files…";
    return;
  }

  const allAllowed = Array.from(files).every((file) =>
    allowedFileTypes.includes(file.type),
  );
  output.innerText = allAllowed
    ? "All files clear!"
    : "Please choose image files only.";
});

Ergebnis

Spezifikationen

Specification
File API
# dfn-type

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobileserver
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Deno
Node.js
type

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Has more compatibility info.

Siehe auch