Ich möchte eine Vorschau einer Datei (eines Bildes) anzeigen können, bevor sie hochgeladen wird. Die Vorschau-Aktion sollte alle im Browser ausgeführt werden, ohne dass Ajax zum Hochladen des Bildes verwendet wird.
Wie kann ich das machen?
javascript
jquery
file-upload
Simbian
quelle
quelle
Antworten:
Bitte schauen Sie sich den folgenden Beispielcode an:
Sie können dieses Beispiel auch hier ausprobieren .
quelle
document.getElementById('blah').src=e.target.result)
input.files[0]
als Daten senden , siehe jQuerys Dokument .input.files[0]
hat nicht den vollständigen Pfad. Wie findet FileReader die Datei?Es gibt verschiedene Möglichkeiten, dies zu tun. Am effizientesten wäre es, URL.createObjectURL () für die Datei von Ihrem <Eingang> aus zu verwenden . Übergeben Sie diese URL an img.src , um den Browser anzuweisen , das bereitgestellte Bild zu laden.
Hier ist ein Beispiel:
Sie können auch FileReader.readAsDataURL () verwenden , um die Datei von Ihrem <Eingang> aus zu analysieren. Dadurch wird eine Zeichenfolge im Speicher erstellt, die eine base64-Darstellung des Bildes enthält.
quelle
URL.revokeObjectURL
wenn Sie mit Ihrem Blob fertig sindEinzeilerlösung:
Der folgende Code verwendet Objekt-URLs, die für die Anzeige großer Bilder viel effizienter sind als Daten-URLs. (Eine Daten-URL ist eine große Zeichenfolge, die alle Dateidaten enthält, während eine Objekt-URL nur eine kurze Zeichenfolge ist, die auf die Dateidaten in verweist Erinnerung):
Die generierte URL lautet wie folgt:
quelle
FileReader
,input.files
etc.)URL.createObjectURL
ist der Weg zu gehen , wenn sie mit Benutzern hochgeladenen Dateien zu tun, schafft es nur ein im Speicher Symlink auf die reale Datei auf der Festplatte des Benutzers.Die Antwort von LeassTaTT funktioniert gut in "Standard" -Browsern wie FF und Chrome. Die Lösung für IE existiert, sieht aber anders aus. Hier Beschreibung der browserübergreifenden Lösung:
In HTML benötigen wir zwei Vorschauelemente,
img
für Standardbrowser unddiv
für IEHTML:
In CSS geben wir die folgende IE-spezifische Sache an:
CSS:
In HTML enthalten wir die Standard- und die IE-spezifischen Javascripts:
Das
pic_preview.js
ist die Javascript aus dem LeassTaTT Antwort. Ersetzen Sie das mit$('#blah')
dem$('#preview')
und fügen Sie das hinzu$('#preview').show()
Nun das IE-spezifische Javascript (pic_preview_ie.js):
Das ist. Funktioniert in IE7, IE8, FF und Chrome. Bitte in IE9 testen und melden. Die Idee der IE-Vorschau wurde hier gefunden: http://forums.asp.net/t/1320559.aspx
http://msdn.microsoft.com/en-us/library/ms532969(v=vs.85).aspx
quelle
Ich habe die Antwort von @ Ivan bearbeitet, um das Bild "Keine Vorschau verfügbar" anzuzeigen, wenn es sich nicht um ein Bild handelt:
quelle
Hier ist eine Version mit mehreren Dateien , basierend auf der Antwort von Ivan Baev.
Der HTML
JavaScript / jQuery
Erfordert jQuery 1.8 aufgrund der Verwendung von $ .parseHTML, was bei der XSS-Minderung helfen sollte.
Dies funktioniert sofort und die einzige Abhängigkeit, die Sie benötigen, ist jQuery.
quelle
Ja. Es ist möglich.
Html
JS
Sie können Live-Demo von hier erhalten.
quelle
Saubere und einfache JSfiddle
Dies ist nützlich, wenn das Ereignis indirekt von einem div oder einer Schaltfläche ausgelöst werden soll.
quelle
<label>
Javascript verwenden und vermeiden, um den Klick auf die Schaltfläche insgesamt zu handhaben. Dateieingabe mit reinem HTML / CSS auslösen. und es ist überhaupt nicht hacky.Beispiel mit mehreren Bildern mit JavaScript (jQuery) und HTML5
JavaScript (jQuery)
Markup (HTML)
quelle
Wie wäre es mit einer Funktion, die die Datei lädt und ein benutzerdefiniertes Ereignis auslöst? Schließen Sie dann einen Listener an den Eingang an. Auf diese Weise haben wir mehr Flexibilität bei der Verwendung der Datei, nicht nur für die Vorschau von Bildern.
Wahrscheinlich ist mein Code nicht so gut wie einige Benutzer, aber ich denke, Sie werden es verstehen. Hier sehen Sie ein Beispiel
quelle
Es folgt der Arbeitscode.
Javascript:
quelle
Wenn sich die Datei in React in Ihren Requisiten befindet, können Sie Folgendes verwenden:
quelle
Was ist mit dieser Lösung?
Fügen Sie einfach das Datenattribut "data-type = editable" zu einem Bild-Tag wie folgt hinzu:
Und das Skript zu Ihrem Projekt natürlich ...
Siehe Demo bei JSFiddle
quelle
Versuche dies
quelle
Dadurch werden mehrere Dateien gleichzeitig als Miniaturbilder in der Vorschau angezeigt
Html
Skript
Arbeitsdemo auf Codepen
Arbeitsdemo auf jsfiddle
Ich hoffe das wird helfen.
quelle
Ich habe ein Plugin erstellt, das dank des Internets den Vorschaueffekt in IE 7+ erzeugen kann, aber nur wenige Einschränkungen aufweist. Ich habe es in eine Github-Seite eingefügt, damit es einfacher zu bekommen ist
quelle
Für das Hochladen mehrerer Bilder (Änderung der @ IvanBaev-Lösung)
http://jsfiddle.net/LvsYc/12330/
Hoffe das hilft jemandem.
quelle
Es ist mein Code. Support IE [6-9] 、 Chrome 17 + 、 Firefox 、 Opera 11 + 、 Maxthon3
quelle
Standard Iamge
quelle
Hier ist eine Lösung, wenn Sie React verwenden:
quelle
Dies ist die einfachste Methode, um eine Vorschau des Bildes anzuzeigen, bevor es vom Browser auf den Server hochgeladen wird, ohne Ajax oder komplizierte Funktionen zu verwenden. Zum Laden des Bildes ist ein "onchange" -Ereignis erforderlich.
Das Bild wird sofort nach Auswahl geladen.
Klicken Sie auf diesen Link, um zu sehen, wie es funktioniert https://youtu.be/7_lGhrYZJWw
quelle
Für meine App mit verschlüsselten GET-URL-Parametern funktionierte nur dies. Ich habe immer eine
TypeError: $(...) is null
. Entnommen aus https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURLquelle
HTML
Dies behandelt auch den Fall, wenn eine Datei mit einem ungültigen Typ (z. B. PDF) ausgewählt wird
quelle