PDA

View Full Version : [html/javascript] Consigli riguardo caricamento immagini in un server


Hieicker
18-04-2013, 09:29
Buongiorno a tutti :) ! Avrei diversi consigli da chiedervi riguardo un problema che devo affrontare. Comincio dicendo che devo fare una pagina html in cui viene data la possibilità all'utente di caricare delle immagini in un server.
Al momento ho creato una form con degli input di type file. L'idea è che cliccandoci sopra si apre una finestra che mi da la possibilità di scegliere il file. Quando poi clicco il bottone per inviare le informazioni in post, la form passa alla pagina successiva o rimane nella stessa ricaricandola però.
Io però devo rendere tutto più dinamico e più "fluido". Qui entra in gioco javascript. Tuttavia avrei prima bisogno di alcune delucidazioni…
1. Posso fare in modo che le immagini vengano inviate senza che la form mi refreshi la pagina?
2. Vorrei utilizzare una barra progressi con la percentuale, che visualizza in tempo reale l'avanzamento del caricamento nel server dell'immagine. Come posso rilevare quanto è stato già uplodato in modo che la percentuale sia veritiera?
3. Vorrei inoltre visualizzare una piccola anteprima dell'immagine che sta venendo caricata. Secondo voi è possibile?

Grazie per le informazioni :)!

Hieicker

wingman87
18-04-2013, 19:47
Non ho mai dovuto fare quello che chiedi ma in effetti la cosa mi incuriosiva così mi sono documentato un po'.
A quanto ho capito un metodo crossbrowser che faccia quello che chiedi esiste ma solo con HTML5. Il che significa che perderesti la compatibilità con i browser di molti utenti. Tuttavia dei modi esistono più o meno per ogni browser, ma scriverti tu il codice sarebbe alquanto frustrante, quindi molti consigliano, credo a ragione, di usare del codice già esistente ad esempio dei plugin jQuery.
Se cerchi "jQuery upload progressbar" trovi tanta roba, prova così. Se invece ti interessa la soluzione HTML5 puoi vedere questo:
http://www.sitepoint.com/html5-javascript-file-upload-progress-bar/

Per la thumbnail invece ho trovato questo (vedi la seconda risposta), però è solo per HTML5, non so se esiste qualcosa per chi non lo supporta:
http://stackoverflow.com/questions/6052187/jquery-how-to-make-a-thumbnail-from-the-input-file-img
Forse ti conviene mostrare l'immagine solo al termine dell'upload.