Far apparire una gif durante upload

marcsellier

Far apparire una gif durante upload

Ciao a tutti

Non ho mai realizzato nulla in Javascript (o in jQuery) e quindi ho qualche problema a realizzare un semplice script che faccia apparire la classica gif di attesa caricamento non appena l'utente clicca sul pulsante di submit.

Questo è il codice che sono riuscito a scrivere:

<html>

<head>
<script src="link-al-sito-di-jquery  jquery-latest.js"></script>
</head>


<body>
<script>
$('#pulsante').click(function(){
  $('#img').show();
}
</script>


<form method='POST' name='modulo' enctype='multipart/form-data'>
<input type='file' name='immagine'/>
<input id="pulsante" type="submit" value='Carica'>
</form>


<img src="img / loading.gif" id="img" style="display:none"/ >
</body>
</html>

Come vedete il codice è molto elementare. Dove sbaglio?

Grazie a tutti per l'aiuto

john.e

Ciao,

A riga 4 non hai ancora messo il link a jQuery, Javascript non può usare librerie se non sono state importate.
Prima si importano le librerie jQuery, dopo si usano con gli script Javascript.
A riga 12 non hai chiuso correttamente l'istruzione JS aggiungi ");" dopo la chiusa parentesi graffa: });
Lo script Javascript per funzionare deve essere spostato subito prima della chiusura del body, può applicare le funzionalità agli elementi solo dopo che sono stati creati nella pagina, come lo hai scritto tu invece la funzione viene eseguita prima ancora che gli elementi vengano creati è normale che non funziona.
L'attributo SRC del tag IMG contiene degli spazi superflui prima e dopo lo slash, non troverà mai quell'immagine.
Lo script non si vedrà mai in azione se richiamato dal click sul tasto SUBMIT perchè quest'ultimo genera automaticamente un refresh della pagina che quindi riporta lo script allo stato iniziale e reimposta l'attributo style="display:none" al tag IMG.

Quando programmi cerca di usare l'indentazione, questa ti consente di riconoscere più velocemente il codice e vedere le nidificazioni dei tag.
Ti ho riscritto lo script applicando il JS all'id #form, in questo modo puoi vedere l'immagine cliccando in un punto qualsiasi della form:
[HTML]
<html>
<head>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
</head>
<body>
<form id="form" method='POST' name='modulo' enctype='multipart/form-data'>
<input type='file' name='immagine'/>
<input id="pulsante" type="submit" value='Carica'>
</form>
<img src="img/loading.gif" id="img" style="display:none"/ >
<script>
$('#form').click(function(){
$('#img').show();
});
</script>
</body>
</html>
[/HTML]
Ciao.

marcsellier

Grazie per la risposta, ma il post è di diversi mesi fa e lo script è stato riscritto da zero. Ciao