Implementieren Sie die Vorschau-Funktion der Front-End-Einzeldatei-Eingabe-Multimedia (Bild und Video)

Überblick

In der Webentwicklung müssen Benutzer häufig Bilder oder Videodateien hochladen. Um ein besseres Benutzererlebnis zu bieten, wird normalerweise eine Vorschau -Funktion bereitgestellt, bevor die Datei hochgeladen wird. Wenn es jedoch erforderlich ist, sowohl Bild- In diesem Artikel wird eine effiziente Methode eingeführt, um Dateitypen über JavaScript dynamisch zu erkennen und geeignete HTML -Elemente basierend auf dem Typ für die Vorschau auszuwählen.

Kernprinzip

Die Implementierung dieser Funktionalität stützt sich hauptsächlich auf den folgenden Web -APIs und -Technologien:

1. HTMLINPUTELEMENT -Dateien Eigenschaft : Erhalten Sie die vom Benutzer ausgewählte Dateien.
2. FileReader -API : Wird zum Lesen von Dateiinhalten auf dem Computer eines Benutzers asynchron gelesen.
3. Url.createObjecturl () : Erstellt ein Domstring für eine Datei- oder ein BLOB -Objekt, das eine URL enthält, mit der das angegebene Objekt dargestellt werden kann. Dies ist insbesondere für Videovoransichten nützlich, da das Laden der gesamten Videodatei in den Speicher vermieden wird.
4. Regelmäßiger Ausdruck : Wird verwendet, um den MIME -Typ der Datei aus den von FileReader gelesenen Ergebnissen zu analysieren, um festzustellen, ob die Datei ein Bild oder ein Video ist.

HTML -Struktur

Zunächst benötigen wir eine HTML -Struktur, um das Dateieingabefeld und den Vorschauderbereich für Bild und Video zu hosten.

 <eingabe type="text" id="thetitle" name="title" placeholder="title">
<eingabe type="text" id="ImagePath" name="ImagePath" versteckt>
<eingabe type="Datei" name="Datei" onchange="reesurl (this)">


<img src="" id="img" alt="Bild Vorschau"   style="max-width:90%">
<br>

<video width="320" height="240" style="Anzeige: Keine" steuert autoplay>
  <source src="" id="forvideo">
  Ihr Browser unterstützt keine Video -Tags.
</source></video></eingabe></eingabe></eingabe>

veranschaulichen:

• : Dies ist das Eingabefeld der Dateiauswahl. Wenn der Benutzer eine Datei auswählt, löst das OnChange -Ereignis die Readurl -Funktion aus und übergibt das aktuelle Eingangsfeldelement als Parameter.
• : Wird verwendet, um die Bildvorschau anzuzeigen. Es kann auf Anzeigen eingestellt werden: keine; am Anfang.
• : Wird verwendet, um die Videovorschau anzuzeigen. Auch zunächst auf Anzeige eingestellt: keine;. Die Autoplay -Eigenschaft kann automatisch Videos abspielen, während die Steuerelement -Eigenschaft die Wiedergabesteuerelemente anzeigt.

JavaScript -Logik

Die Kernlogik befindet sich in der ReadURL -Funktion, die für die Bearbeitung von Dateiauswahlereignissen, die Identifizierung von Dateitypen und die Aktualisierung der entsprechenden Vorschaltelemente verantwortlich ist.

 Funktion Readurl (Eingabe) {
  // Erhalten Sie das Video -Quellelement und sein übergeordnetes Videoelement var videource = document.querySelector ("#Forvideo");
  var VideoElement = videosource.parentnode;
  var ImageElement = document.querySelector ("#img");

  // Jedes Mal, wenn Sie eine neue Datei auswählen, verbergen Sie zuerst alle Vorschauelemente und löschen Sie die Content ImageElement.style.display = "Keine";
  ImageElement.SetAttribute ("Src", "");
  VideoElement.Style.Display = "Keine";
  videosource.src = "";
  VideoElement.load (); // das Videoelement zum Nachladen des Inhalts if (input.files && input.files [0]) {erstellen {
    var file = input.files [0];
    var reader = new fileReader ();

    Reader.onload = Funktion (e) {
      // Verwenden Sie regelmäßige Ausdrücke, um den Dateimime -MIME -Typ aus der Daten -URL zu extrahieren // Das Format der Daten -URL lautet normalerweise: Daten: [<matentyps>] [; Base64], <daten>
      var match = e.target.result.match (/^Daten: ([^/]) \/([^;]);/) || [];
      var type = Match [1]; // den Haupttyp wie "Bild" oder "Video" extrahieren.

      // Disaktionen werden gemäß Dateityp durchgeführt, wenn (Typ === "Video") {
        // Wenn es sich um eine Videodatei handelt, verwenden Sie URL.CreateObjecturl, um eine URL zu erstellen
        // Diese Methode ist effizienter, da die gesamte Videodatei nicht in Speichervideosource.src = url.createObjecturl (Datei) geladen wird.
        VideoElement.load (); // Laden Sie das neue Video -Source -Videoelement.style.display = "Block"; // Video Player imageElement.style.display = "Keine" anzeigen; // Stellen Sie sicher, dass die Bildvorschau versteckt ist} else if (type === "Bild") {
        // Wenn es sich um eine Bilddatei handelt, verwenden Sie die von FileReader gelesene Daten -URL als Bildquelle Bildelement.setAttribute ("src", e.target.result);
        ImageElement.Style.display = "Block"; // Image VideoElement.style.display = "Keine"; // Stellen Sie sicher, dass die Videovorschau versteckt ist} else {
        // andere nicht unterstützte Typen behandeln, z. B. das Löschen der Vorschau oder das Anzeigen einer Eingabeaufforderungskonsole.warn ("nicht unterstützter Dateityp:", Typ);
      }
    };

    // Lesen Sie den Dateiinhalt als Daten -URL
    // Für das Bild erzeugt dies eine base64 codierte Zeichenfolge, die direkt als "<img  alt="Implementieren Sie die Vorschau-Funktion der Front-End-Einzeldatei-Eingabe-Multimedia (Bild und Video)" >" `` `` `` `` `` `` `` `` src`` verwendet werden kann
    Reader.ReadasDataurl (Datei);
  }
}</daten></matentyps>

Vollständiger Codebeispiel

Integrieren Sie den oben genannten HTML- und JavaScript -Code, um die vollständige Bild-/Video -Vorschau -Funktion zu erzielen.

HTML (Makeapost.php oder .html)

 

<kopf>
    <meta charset="utf-8">
    <meta name="viewPort" content="width = Gerätebreite, initial-scale = 1,0">
    <title> Datei multimedia preview </title>
    <styles>
        Körper {Schriftfamilie: Arial, sans-serif; Rand: 20px; }
        IMG, Video {Border: 1PX Solid #ddd; Rand: 10px; }
        input [type = "file"] {margin-top: 10px; }
    


    <h1> Dateivorschau hochladen </h1>
    <eingabe type="text" id="thetitle" name="title" placeholder="title">
    <eingabe type="text" id="ImagePath" name="ImagePath" versteckt>
    <br>
    <label f> Bild- oder Videodatei auswählen: </label>
    <input type="Datei" id="FileInput" name="Datei" onchange="reesurl (this)">

    
    <img src="" id="img" alt="Bild Vorschau"   style="max-width:90%">
    <br>
    
    <video width="320" height="240" style="Anzeige: Keine" steuert autoplay>
      <source src="" id="forvideo">
      Ihr Browser unterstützt keine Video -Tags.
    </source></video>

    <script>
        Funktion Readurl (Eingabe) {
            var videosource = document.querySelector ("#Forvideo");
            var VideoElement = videosource.parentnode;
            var ImageElement = document.querySelector ("#img");

            // Jedes Mal, wenn Sie eine neue Datei auswählen, verbergen Sie zuerst alle Vorschauelemente und löschen Sie die Content ImageElement.style.display = "Keine";
            ImageElement.SetAttribute ("Src", "");
            VideoElement.Style.Display = "Keine";
            videosource.src = "";
            // Videoelement.load (); // das Videoelement zum Nachladen des Inhalts erzwingen, aber es ist möglicherweise nicht erforderlich, wenn (input.files && input.files [0]) {
                var file = input.files [0];
                var reader = new fileReader ();

                Reader.onload = Funktion (e) {
                    var match = e.target.result.match (/^Daten: ([^/]) \/([^;]);/) || [];
                    var type = Match [1]; // "Bild" oder "Video"

                    if (type === "Video") {
                        videosource.src = url.createObjectUrl (Datei);
                        VideoElement.load (); 
                        VideoElement.Style.display = "Block";
                        ImageElement.Style.Display = "Keine";
                    } else if (type === "Bild") {
                        ImageElement.SetAttribute ("Src", e.Target.Result);
                        ImageElement.Style.display = "Block";
                        VideoElement.Style.Display = "Keine";
                    } anders {
                        console.warn ("nicht unterstützte Dateitypen:", Typ);
                        ALERT ("Der von Ihnen ausgewählte Dateityp unterstützt keine Vorschau. Bitte wählen Sie eine Bild- oder Videodatei.");
                    }
                };
                Reader.ReadasDataurl (Datei);
            } anders {
                // Wenn keine Datei ausgewählt ist, löschen Sie auch die Vorschau -ImageLement.style.display = "None";
                ImageElement.SetAttribute ("Src", "");
                VideoElement.Style.Display = "Keine";
                videosource.src = "";
            }
        }
    </script>

</eingabe></eingabe></styles></kopf>