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.