Frontend Bildupload mit Bild-Vorschau

AndreasWitt

Frontend Bildupload mit Bild-Vorschau

Beitragvon AndreasWitt » Mo 13. Nov 2017, 15:28

Hallo in die Runde,

für alle diejenigen, die öfter mal Frontend-Formulare erstellen, bei denen auch ein Bildupload möglich ist, möchte ich euch kurz eine schnell Lösung zeigen, wie man dabei auch eine Vorschau des ausgewählten Bildes anbieten kann.

Bilder lassen sich derzeit "out-of-the-box" nur zusammen mit Objekten oder Dokumenten per Frontend hochladen. Aber auch hier wäre es für den Nutzer benutzerfreundlicher, wenn er für das ausgewählte Bild eine Vorschau erhält. Dafür brauchen wir grundsätzlich folgenden webEdition-Tag:

Code: Alles auswählen

<we:userInput type="img" name="Bild" pass_id="image" editable="true" thumbnail="Preview" width="300" parentid="81" quality="8" />
Das erzeugt dann im Frontend folgendes. Wählt der Nutzer ein Bild über den Button durchsuchen aus, wird lediglich der Text "Keine Datei ausgewählt" durch den Dateinamen ersetzt.

Bild

Um nun das ausgewählte Bild als Vorschau zu erhalten, benötigen wir folgenden Code. Wichtig hierbei ist, dass bei we_ui_myFormName[Bild] "myFormName" durch die Bezeichnung des umschließenden <we:form name="myFormName"> anzupassen ist.

Code: Alles auswählen

<we:userInput type="img" name="Bild" pass_id="image" editable="true" thumbnail="Preview" width="300" parentid="81" quality="8" />
<script type="text/javascript">
	$(document).ready(function(){
		function previewSelectedImage(img) {
			/* start: get html img tag for preview */
			var row = $(img).closest('tr');
			var prevRow = row.prev();
			var thumbnail = prevRow.find('img');
			/* end: get html img tag for preview */

			if(img.files && img.files[0]) {
				var reader = new FileReader();
				reader.readAsDataURL(img.files[0]);
				reader.onload = function (e) {
					thumbnail.attr('src', e.target.result);
					thumbnail.css('width', '300px');
					thumbnail.css('height', 'auto');
				}
			}
		}

		$("input[name='we_ui_myFormName[Bild]']").change(function(){
			previewSelectedImage(this);
		});
	});
</script>
Als Ergebnis erhält der Nutzer nach der Auswahl des Bildes folgende Ansicht - abhängig vom Bildmotiv :D

Bild

Viel Spaß beim Nachbauen.

Zurück zu „Anleitungen / Tutorials“

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 1 Gast