Inline-afbeeldingen in Adaptive Forms
- Van toepassing op:
- Experience Manager 6.4
- Experience Manager 6.5
- Onderwerpen:
- Adaptieve formulieren
Gemaakt voor:
- Ervaren
- Ontwikkelaar
Een veelvoorkomend geval is het weergeven van de geüploade afbeelding als een inline-afbeelding in Adaptieve vorm. Standaard wordt de geüploade afbeelding weergegeven als een koppeling en deze ervaring kan worden vergroot door de afbeelding weer te geven in Adaptief formulier. Dit artikel doorloopt de stappen voor de weergave van inline-afbeeldingen.
Afbeelding voor plaatsaanduiding toevoegen
De eerste stap bestaat uit het vooraf toevoegen van een plaatsaanduiding voor een div-element aan de bestandsbijlage. In de code onder de component voor bestandsbijlagen wordt de CSS-klassennaam van het uploaden van foto's weergegeven. De JavaScript-functie is onderdeel van de clientbibliotheek die is gekoppeld aan de adaptieve formulieren. Deze functie wordt aangeroepen in de gebeurtenis initialize van de component voor bestandsbijlagen.
/**
* Add Placeholder Image
* @return {string}
*/
function addTempImage(){
$(".photo-upload").prepend(" <div class='preview'' style='border:2px solid;height:225px;width:175px;text-align:center'><br><br><div class='text'>3.5mm * 4.5mm<br>2Mb max<br>Min 600dpi</div></div><br>");
}
Inline-afbeelding weergeven
Nadat de gebruiker de afbeelding heeft geüpload, wordt de hieronder vermelde functie aangeroepen voor het vastleggen van de gebeurtenis van de bestandsbijlage. De functie ontvangt het geüploade bestandsobject als een argument.
/**
* Consume Image
* @return {string}
*/
function consumeImage (file) {
var reader = new FileReader();
console.log("Reading file");
reader.addEventListener("load", function (e) {
console.log("in the event listener");
var image = new Image();
$(".photo-upload .preview .imageP").remove();
$(".photo-upload .preview .text").remove();
image.width = 170;image.height = 220;
image.className = "imageP";
image.addEventListener("load", function () {
$(".photo-upload .preview")[0].prepend(this);
});
image.src = window.URL.createObjectURL(file);
});
reader.readAsDataURL(file);
}
Distribueren op uw server
- Download en installeer de cliëntbibliotheekop uw instantie van AEM gebruikend het pakketmanager van AEM.
- Download en installeer de steekproefvormop u uw instantie van AEM gebruikend het pakketmanager van AEM.
- Punt uw browser aan voegt het Beeld Inlinetoe
- Klik op de knop "Foto koppelen" om een afbeelding toe te voegen