Immagini in linea in Adaptive Forms

Un caso d’uso comune consiste nel visualizzare l’immagine caricata come immagine in linea in Modulo adattivo. Per impostazione predefinita, l’immagine caricata viene visualizzata come collegamento e questa esperienza può essere migliorata visualizzando l’immagine in Modulo adattivo. Questo articolo illustra i passaggi necessari per visualizzare le immagini in linea.

Aggiungi immagine segnaposto

Il primo passaggio consiste nell’anteporre un div segnaposto al componente allegato. Nel codice seguente il componente file allegato è identificato dal nome della classe CSS photo-upload. La funzione JavaScript fa parte della libreria client associata ai moduli adattivi. Questa funzione viene chiamata nell’evento di inizializzazione del componente file allegato.

/**
* 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>");

}

Visualizza immagine in linea

Dopo che l’utente ha caricato l’immagine, la funzione indicata di seguito viene richiamata in caso di commit del componente file allegato. La funzione riceve l’oggetto file caricato come argomento.

/**
* 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);
}

Distribuisci sul server

• Scarica e installa libreria client sull’istanza AEM utilizzando Gestione pacchetti AEM.
• Scarica e installa modulo di esempio sull’istanza di AEM utilizzando Gestione pacchetti AEM.
• Puntare il browser a Aggiungi immagine in linea
• Fai clic sul pulsante "Allega la tua foto" per aggiungere un’immagine