HTML5-Implementierung der Vorschau lokaler Bilder _HTML5-Tutorial-Fähigkeiten

Problembeschreibung
Angenommen, wir haben eine Bild-Upload-Steuerung in HTML:

Code kopieren

Der Code ist wie folgt:

Beachten Sie, dass „accept="image/*"“ sehr wichtig ist. Es gibt an, dass das hochzuladende Bild mit dem Popup-Fenster-Auswahltyp des Systems und anderen Problemen auf dem mobilen Endgerät zusammenhängt.

Dann stellt sich die Frage: Gibt es eine Möglichkeit, den Inhalt des Bildes zu lesen, bevor das Formular an den Server gesendet wird? Es scheint einfach zu sein, es sind alles Client-Dateien, also sollte es möglich sein, aber vorher gab es wirklich keine gute Möglichkeit, aber seit dem Aufkommen von HTML5 ist diese Funktion zurückgekehrt und diese Funktion kann leicht über FileReader realisiert werden .

Beispiele veranschaulichen das Problem

Code kopieren

Der Code lautet wie folgt:

$(function () {

$('#upload_image').change(function(event) {

// Holen Sie sich das HTML5-JS-Objekt der Datei basierend auf diesen
var-Dateien = event.target.files, file; Sehen Sie, was das in der Konsole ist. Was ist das Objekt?
console.log(file);// Dann können wir Aktionen wie die Überprüfung der Dateigröße durchführen
if(file.size > 1024 * 1024 * 2) {
warning('Bildgröße darf 2 MB nicht überschreiten!');
return false;
// !!!!!! , über dieses Dateiobjekt eine verfügbare Bild-URL generieren
// Fenster-URL-Tool abrufen
var URL = window.URL ||// Ziel-URL über Datei generieren
var imgURL = URL.createObjectURL(file );
// Verwenden Sie diese URL, um ein zu generieren und es anzuzeigen
$('body').append($('').attr; ('src', imgURL));
// Verwenden Sie den folgenden Satz, um den Server für diese URL im Speicher freizugeben. Nach der Ausführung ist die URL ungültig
// URL.revokeObjectURL(imgURL); 🎜>}
});
});
Kurze Beschreibung

Kurz gesagt, der gesamte Vorgangsentwurf ist wie folgt:

1. Lösen Sie das Ereignis durch das Änderungsereignis von aus >2. Holen Sie sich die js-Objektdatei der hochgeladenen Datei
3. Generieren Sie eine verwendbare URL aus dem Dateiobjekt
>5.* Release Die wichtigsten Punkte des Servers dieser URL

:

1 Für dieselbe Datei wird bei jedem Aufruf von URL.createObjectURL eine andere URL neu generiert; 2. Rufen Sie die URL auf. Wenn Sie .createObjectURL aufrufen, öffnet der Browser automatisch Speicherplatz, um die URL bereitzustellen Der Server schaltet es aus und eine 404 wird angezeigt, wenn diese URL erneut angefordert wird.
4 Dies alles ist eine Frage des Clients, und der Server weiß nichts davon, auch nicht über das von Ihnen ausgewählte Bild. Die imgURL lautet wahrscheinlich wie folgt: blob:http://localhost:8000/22cc97d5-5e46-4d87-9df4-c3e8c0aa72bb