Ciao.
Tutti ben sapete che se vogliamo far caricare sul server delle immagini dobbiamo fare i conti con:
- Quante immagini
- Peso delle immagini
- Velocità di connessione
- Varie ed eventuali
Tutto questo per stimare, in modo molto approssimato, i tempi di durata dell'operazione ed evitare che si vada in timeout o che l'utente interrompa l'esecuzione chiudendo il browser o cambiando pagina.
Tutti sappiamo anche che esiste la codifica Base64 usabile anche per le immagini.
Non ho scoperto l'acqua calda ma ho voluto capire se conviene un upload "blando" ed avere lo stesso effetto.
Ho creato una pagina di upload che fa caricare contemporaneamente 4 immagini (ne possiamo aggiungere di più).
Lato Client viene usato un banalissimo form ma alla selezione dell'immagine si carica subito l'equivalente in Base64
All'invio del form, la pagina chiamata (in questo caso è ASP ma vale per qualsiasi linguaggio lato server)
Riceve solo la stringa delle immagini codificate.
Molto veloce perchè si tratta di banale testo.
A questo punto, Lato Server, è possibile archiviare la Base64 oppure riconvertirla in immagine e salvarla sul disco.
Questo dipende solo dalle necessità di utilizzo.
In pratica ho spaventosamente accellerato l'upload per avere lo stesso risultato.
Qui di seguito inserisco l'intera pagina in ASP. Ma è la parte JS che la fa da padrone.
La pagina non archivia ma chiama se stessa e fa rivedere tutte le immagini passate in Base64
codice:
<%@LANGUAGE="VBSCRIPT"%>
<%
Response.Buffer = False ' importante per far rivedere tutte le immagini se sono molto grandi
' estrazione variabili delle 4 immagini
Img1=request.Form("CodFile1")
Img2=request.Form("CodFile2")
Img3=request.Form("CodFile3")
Img4=request.Form("CodFile4")
LstImg="" ' elenco delle immagini caricate
for x=1 to 4
if not eval("Img"&x)="" then
LstImg=LstImg&","&x
end if
next
%>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
function ImgToCode(element) { /* converte immagine scelta in locale in formato Base64 */
var Anteprima="Ant"+element.id; /* AntFile1, AntFile2 ...*/
var Img64="Cod"+element.id; /* CodFile1, CodFile2 ...*/
var ThisCodeVar=document.getElementById(Img64);
if (!ThisCodeVar) { /* campo codice 64 per questa immagine non è stato creato. va creato */
var HidCode = document.createElement("input");
HidCode.type = "hidden";
HidCode.id = Img64;
HidCode.name = Img64;
MyForm.appendChild(HidCode);
}
var file = element.files[0]; /* oggetto dell'immagine selezionata in locale */
var reader = new FileReader(); /* costruisce l'oggetto da leggere in modo asincrono per la codifica. torna al completamento della lettura */
reader.onloadend = function() { /* questa funzione si attiva al completamento della codifica */
document.getElementById(Anteprima).src=reader.result;
document.getElementById(Img64).value=reader.result;
}
reader.readAsDataURL(file); /* avvia la codifica dell'oggetto */
}
</script>
</head>
<body>
<form id="MyForm" method="post">
<div style="float:left;width:24%;">
<input type="file" id="File1" name="File1" accept="image/*" onchange="ImgToCode(this)" /><br><img id="AntFile1" name="AntFile1" style="max-width:40%;max-height:100px;">
</div>
<div style="float:left;width:24%;">
<input type="file" id="File2" name="File2" accept="image/*" onchange="ImgToCode(this)" /><br><img id="AntFile2" name="AntFile2" style="max-width:40%;max-height:100px;">
</div>
<div style="float:left;width:24%;">
<input type="file" id="File3" name="File3" accept="image/*" onchange="ImgToCode(this)" /><br><img id="AntFile3" name="AntFile3" style="max-width:40%;max-height:100px;">
</div>
<div style="float:left;width:24%;">
<input type="file" id="File4" name="File4" accept="image/*" onchange="ImgToCode(this)" /><br><img id="AntFile4" name="AntFile4" style="max-width:40%;max-height:100px;">
</div>
<div style="clear: left;"></div>
<br><hr>
<div align="center"><button type="submit">INVIA LE IMMAGINI SELEZIONATE</button></div>
<hr><br>
</form>
<div>
Immagini Caricate:<br>
<%
ArrImg=split(LstImg,",")
for x=0 to UBound(ArrImg)
if x>0 then
%>
<img src='<%=eval("Img"&ArrImg(x))%>' style="max-width:24%">
<%
end if
next
%>
</div>
</body></html>
E' possibile fare dei test a questo indirizzo:
https://www.fraweb.it/rivi/Esempio_ImgToBase64.asp
Provate a caricare 4 immagini molto grandi e verificare i tempi di risposta.
Ora la mia considerazione:
Vale la pena utilizzare questo metodo o si vengono ad incontrare delle problematiche che non ho considerato?