Frontend Bildupload mit Bild-Vorschau
Verfasst: 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:
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.
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.
Als Ergebnis erhält der Nutzer nach der Auswahl des Bildes folgende Ansicht - abhängig vom Bildmotiv
Viel Spaß beim Nachbauen.
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" />
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>
Viel Spaß beim Nachbauen.