Pagina 1 di 2 1 2 ultimoultimo
Visualizzazione dei risultati da 1 a 10 su 16
  1. #1

    Upload Immagini: Considerazione

    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?

  2. #2
    Amministratore L'avatar di Vincent.Zeno
    Registrato dal
    May 2003
    residenza
    Emilia-Romagna (tortellini und cappelletti land!)
    Messaggi
    20,649
    con buffer=false ?
    senza impostare Server.ScriptTimeout ?

    ho tentato di caricare 6 MB (ed ho una connessione per l'upload a 2Mb) e questa è la risposta dopo 20/25 secondi.
    codice:
    Response Buffer Limit Exceeded
    /rivi/Esempio_ImgToBase64.asp, line 0
    Execution of the ASP page caused the Response Buffer to exceed its configured limit.
    e come può JS interferire sula velocità di caricamento, visto che esegue solo azioni lato client?

  3. #3
    Vinc, il problema del buffer è solo relativo alla visione (dopo il caricamento) delle immagini selezionate.

    In pratica se elimini queste righe:
    codice:
    	<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>
    non hai nessun errore.

    Fai altre prove o creati la tua pagina

  4. #4
    Amministratore L'avatar di Vincent.Zeno
    Registrato dal
    May 2003
    residenza
    Emilia-Romagna (tortellini und cappelletti land!)
    Messaggi
    20,649
    io devo eliminare delle righe?

    non sei tu che stai proponendo del codice?


    dimenticavo: il test di prima l'ho fatto caricando un solo file da 6 MB

  5. #5
    ... non è chiaro.
    È solo una considerazione.
    Non sto chiedendo aiuti

  6. #6
    Amministratore L'avatar di Vincent.Zeno
    Registrato dal
    May 2003
    residenza
    Emilia-Romagna (tortellini und cappelletti land!)
    Messaggi
    20,649
    non chiedi aiuti ma fai una proposta, fin qui ok.

    ti faccio notare che c'è un problema nella tua proposta ma dici che "devo io" fare modifiche?


  7. #7
    se leggessi quel che ho scritto invece di soffermarti sul codice ... che avrei anche potuto evitare di postarlo.

  8. #8
    Utente di HTML.it L'avatar di U235
    Registrato dal
    Mar 2006
    Messaggi
    1,521
    Ora la mia considerazione:
    Vale la pena utilizzare questo metodo o si vengono ad incontrare delle problematiche che non ho considerato?
    Una considerazione che pone una domanda, vuoi delle risposte?

    Riceve solo la stringa delle immagini codificate.
    Molto veloce perchè si tratta di banale testo.
    Potresti spiegare meglio questo?

    EDIT:
    Non ho ben capito rispetto a cosa parliamo quando dici :
    Provate a caricare 4 immagini molto grandi e verificare i tempi di risposta.
    Voglio dire: a cosa dovrei confrontarlo per "verificare i tempi di risposta"?
    Ultima modifica di U235; 01-05-2021 a 15:54

  9. #9
    Utente di HTML.it L'avatar di vic53
    Registrato dal
    Oct 2010
    residenza
    Fonte Nuova (Roma)
    Messaggi
    588
    quello che hai postato e' uno spunto utile per upload da inserire in futuri progetti...
    grazie
    Vic53

  10. #10
    ... uno che ce capisce ...

    Ma secondo te potrebbe creare problemi in qualche modo?
    È un metodo molto conosciuto ma mai usato.

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2024 vBulletin Solutions, Inc. All rights reserved.