Barra upload file

pippuccio76

Utente Attivo
21 Lug 2013
27
1
3
Dovrei creare una barra di avanzamento cheavanza con l'upload dei file :

Codice:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form enctype="multipart/form-data" name='lavorazione' >
    <input type="file" name="uploadfile" id="uploadfile" /><br>
Nome:   <input type="text" name="nome" id=" nome1"value="" />   <br>
Cognome   <input type="text" name="cognome" id="cognome1" value="" />   <br>
  
     <button id="aggiungi" class='btn btn-info'>Aggiungi Lavorazione</button>
     <button type="button" name="crea" id="upload" class='btn btn-success'>Inserisci Lavorazioni</button>
</form>
<div id="barra"></div>
<div id="dx"><span>In Aggiornamento</span><span id="barra"><span id="percentuale"></span></span></div>

<div id="risultato"></div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {


$("#dialog").hide();


$("#upload").click(function() {
        
      
      
       var file1 = lavorazione.uploadfile.value;
      
      
       if(controlla_e_invia()){
          
           $('#upload').hide();
           $('#aggiungi').hide();
          
           $("#dialog").show();
          
 
          var p =10;
            s = setInterval(function() {
            $("#barra").css("width", p + "%");
            $("#percentuale").html(p + "%");
            p++;
            if (p > 100)
                clearInterval(s);
                $("#barra").hide();
            }, 80);
          //Creazione di un oggetto FormData…
           var datiForm = new FormData();
          
          //####################################
            // FILE 1 #
            //####################################
            
            //… aggiunta del file
            datiForm.append('file',$("#uploadfile")[0].files[0]);


            //… aggiunta del nome
            datiForm.append('nome',$("#nome1").val());


            //aggiunta cognome
            datiForm.append('cognome',$("#sel_scala_colori1").val());
            
             $.ajax({
            url: 'lavorazione_inserita.php',
            type: 'POST', //Le info testuali saranno passate in POST
            data: datiForm, //I dati, forniti sotto forma di oggetto FormData
            cache: false,
            processData: false, //Serve per NON far convertire l’oggetto
                     //FormData in una stringa, preservando il file
            contentType: false, //Serve per NON far inserire automaticamente
                     //un content type errato
               success: function(msg)
               {
                 $("#risultato").html(msg);
                
               },
               error: function()
               {
                 alert("Chiamata fallita fformdata, si prega di riprovare...");
               }
           });
          
       }
                
      
    });
    
});
    
function controlla_e_invia(){
 
   var file1 = lavorazione.uploadfile.value;
   var nome1 = lavorazione.nome.value;
   var cognome = lavorazione.cognome.value;
  


  
      if(file1==''){
          var message = 'Non hai selezionato il file 1' ;
          alert(message);
         return false;
      }
       if(nome1==''){
          var message = 'Non hai selezionato il nome 1' ;
          alert(message);
         return false;
      }
       if(cognome==''){
          var message = 'Non hai selezionato il cognome 1' ;
          alert(message);
         return false;
      }else{
            return true     
      }
}
</script>
</body>
</html>

Il codice php non fa altro che restituire un file ricevuto

ecco il link http://lemuria.altervista.org/invio_file_progess_bar/
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Ciao, dai un occhiata a questa discussione. Puoi utilizzare il tag progress al posto del div
HTML:
<progress id="progress" style="width:300px;" max="100" value="0"></progress> <span class="percent">0%</span>
 
Discussioni simili
Autore Titolo Forum Risposte Data
P Barra avnzamento per upload... Javascript 1
C Segnalo barra laterale di navigazione ASSENTE con Chrome Comunicazioni dallo Staff 5
M Barra di navigazione HTML e CSS 1
M Barra di navigazione con google HTML e CSS 1
E Barra di avanzamento codice PHP PHP 4
R Visualizzazione barra superiore Google Search Console 0
R Barra del menù principale decentrata Joomla 4
E [HTML] non apre link a file locale ma se lo imposto su barra indirizzi lo apre HTML e CSS 3
V Semplice barra di ricerca con filtro categorie prodotti E-Commerce 0
Store creazione barra search sito web Presentati al Forum 3
Axis18 Creare una barra di avanzamento con $.ajax Ajax 7
I Url rewrite con .htaccess funziona ma poi mostra indirizzo "reale" nella barra di navigazione Apache 1
A [Javascript] modificare il contenuto della barra indirizzi di un browser Javascript 1
ecosito [WordPress] Barra sconosciuta sull'homepage WordPress 1
F Rete Wireless… moduli da barra din??? Reti LAN e Wireless 0
T [HTML] Inserire barra di ricerca che ricerca solo le pagine del proprio sito HTML e CSS 6
ecosito [Wordpress] La barra del menù mi nasconde la parte alta delle pagine WordPress 0
Monital [Javascript]Barra di aggiornamento in pop pup Javascript 1
Monital [PHP] Eliminare la Barra di caricamento file alla fine dell'esecuzione PHP 11
felino [Windows 10] Barra di stato bloccata: tasto start e menu start Windows e Software 4
F Fissare la barra di navigazione a fondo pagina HTML e CSS 5
filomeni Barra per cookie law (jquery+php) Snippet Javascript 4
A come eliminare i suggerimenti della barra degli indirizzi su google chrome? Windows e Software 3
S errore barra menu su tema joomla Joomla 0
J Problema con link nella barra di navigazione HTML e CSS 1
J Icone non allineate correttamente nella barra di navigazione HTML e CSS 2
R Barra ricerca php e mysql PHP 0
L CSS, cambiare i colori della barra e ingrandire una immagine WordPress 1
asevenx problema barra menu e compatibilità browser WordPress 6
G Riprodurre barra laterale like-Facebook Javascript 2
M Selezionare quantità spostando una "barra" Javascript 5
P cambiare url visibile sulla barra indirizzi Hosting 1
S Nascondere nome pagina web dalla barra degli indirizzi HTML e CSS 2
A barra navigazione recordset PHP 1
M Barra navigazione jQuery, pulsante "illuminato fisso" jQuery 0
D Barra menu animata Flash 3
S Barra di Navigazione Dinamica PHP 14
G barra di navigazione: come è stata fatta? [era: come è stato fatto?] Webdesign e Grafica 2
I Barra navigazione/menù HTML e CSS 24
I barra navigazione/menù HTML e CSS 0
B creare barra orizzontale per sito HTML e CSS 2
K barra di preload durante caricamento video Flash 2
O Filemaker 10 Advanced - barra degli strumenti Database 0
R Impedire l'accesso a una pagina dalla barra degli indirizzi PHP 27
C barra che si apre sopra la pagina HTML e CSS 1
A Testo scorrevole sulla barra HTML e CSS 4
W staccare il testo dalla barra menù HTML e CSS 12
E Barra comandi Excel scomparsa Windows e Software 7
P Come creare una barra di ricerca in flash Flash 1
N problemi barra preload.. Flash 7

Discussioni simili