Un caso d’uso comune è la visualizzazione dell’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.
Il primo passo è quello di anteporre un div segnaposto al componente file allegato. Nel codice sottostante il componente allegato file è identificato dal nome della classe CSS del file di caricamento foto. La funzione JavaScript fa parte della libreria client associata ai moduli adattivi. Questa funzione viene chiamata nell'evento initialize 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>");
}
Dopo che l'utente ha caricato l'immagine, la funzione elencata di seguito viene richiamata nell'evento 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);
}