Con questo esempio vogliamo realizzare uno script per caricare sul nostro sito, file, immagini o altro, senza che venga ricaricata la pagina.
La pagina avrà la form per caricare le immagini e visualizzerà in diretta le immagini caricate, il tutto senza nessun reload o refresh della pagina.
Partiamo dal fatto che in puro Ajax, purtoppo non si può inviare un form con enctype "multipart/form-data", quindi non si può caricare un file in maniera asincrona.
Un'altra soluzione era inviare in maniera asincrona il percorso locale del file, e poi lanciare automaticamente la form che caricava il file, in maniera asincrona, ma c'è il problema "fakepath".
Con l'HTML 5, già usato da Intenet Explorer 8 e FireFox, quando cerchiamo di manipolare il percorso che viene inserito in una input di tipo "file", vedremo che il percorso locale viene sostituito con "fakepath"...e poi il nome del file. Questa sostituzione è automatica ed è giustificata da problemi di sicurezza....quindi non provate neanche ad aggirarla, perché non riuscirete!
Una soluzione, per avere comunque lo stesso effetto, è quella che ora vi propongo:
- Si ha la form con enctype "multipart/form-data", tipica per l'upload di file, e la nostra input di tipo "file"
- Poi avremo un Iframe, al quale daremo lo style "visibility: hidden;", che avrà come proprietà "src" il percorso del nostro file che conterrà lo script per l'effettivo upload.
Il file con l'upload conterrà una fuzione Javascript che verrà lanciata a fine upload, e non farà altro che rilanciare una funzione Ajax che risiede nella pagina main, and reload the new photos added.
Warning! I use to upload files Persits the library, so if you want to use it you also read this post on how to upload files to aruba with persits , or replaced the script in the page "upload.asp" with your script upload. Lsciare attention only to the JavaScript code after the upload script.
The result is what you see below (in this example images will be resized to 50px X 50px wait .... also depending on the size of the image you add ....):
If you want to download Example:
Milanos: Upload image file ajax javascript asp
