[PHP] Eliminare la Barra di caricamento file alla fine dell'esecuzione

Discussione in 'PHP' iniziata da Monital, 27 Agosto 2016.

  1. Monital

    Monital Utente Attivo

    Registrato:
    15 Aprile 2009
    Messaggi:
    778
    Mi Piace Ricevuti:
    2
    Punteggio:
    18
    Salve

    ho trovato questo in rete

    PHP:
    <script type="text/javascript">
        $(document).ready(function() {
            var p = 10;
            s = setInterval(function() {
                $("#barra").css("width", p + "%");
                $("#percentuale").html(p + "%");
                p++;
                if (p > 100)
                    clearInterval(s);
            }, 80);
        });
    </script>
    <?php
    //...bla bla
    echo'<div id="dx"><span>In Aggiornamento</span><span id="barra"><span id="percentuale"></span></div>';
    ?>
    forse mi sto perdendo in un bicchier d'acqua perchè los cript funziona ma non riesco a far togliere l barra quando il file ha finito di caricarsi. la batta mi resta sempre lì.

    inoltre sarebbe oro se risucissi a far durare la barra proprio il tempo necessario che los cript si carichi.

    avevo pensato al refresh ma la barra è molto più veloce dello script quindi quando la barra termina il caricamento in realtà lo script sta ancora caricando.

    Suggerimenti?
     
  2. livellacri

    livellacri Utente Attivo

    Registrato:
    18 Agosto 2016
    Messaggi:
    108
    Mi Piace Ricevuti:
    13
    Punteggio:
    18
    Sesso:
    Maschio
    Per togliere la barra quando arriva al 100 basta che aggiungi
    Codice:
    $("#barra").hide();
    
    nell'if.

    Quindi diventa:
    Codice:
    if (p > 100) {
       clearInterval(s);
       $("#barra").hide();
    }
    
    Per farla durare come lo script hai 2 possibilità:
    • calcoli il tempo che impiega lo script e di conseguenza modifichi l'intervallo dell'incremento della barra
    • crei una funzione incrementabarra e la metti in 100 punti dello script
     
  3. Monital

    Monital Utente Attivo

    Registrato:
    15 Aprile 2009
    Messaggi:
    778
    Mi Piace Ricevuti:
    2
    Punteggio:
    18
    los cript potrebbe anche variare, di poco ma potrebbe, per farla durare quanto lo script puoi aiutarmia s crivere il js? perchè di js io mi limito a prendere qualcosa qua e là non ci capisco molto. Prima opoi dovrò mettermici asu a studiarmelo un pò.

    grazie
     
  4. livellacri

    livellacri Utente Attivo

    Registrato:
    18 Agosto 2016
    Messaggi:
    108
    Mi Piace Ricevuti:
    13
    Punteggio:
    18
    Sesso:
    Maschio
    Sostituisci tutto il codice js con questo:
    Codice:
    <script type="text/javascript">
    var p = 0;
    function incrementaBarra() {
        $("#barra").css("width", p + "%");
        $("#percentuale").html(p + "%");
        p++;
        if (p > 100) {
            $("#barra").hide();
        }
    }
    </script>
    
    Poi, all'inizio del codice php, metti:
    PHP:
    ob_implicit_flush(true);
    ob_end_flush();
    e in 100 punti dello script php metti questo codice (ad intervalli regolari, per esempio se hai 100 righe mettilo ogni riga), che incrementa la barra di 1.
    PHP:
    echo "<script>incrementaBarra();</script>";
    In questo modo la barra dura esattamente come il codice php.
     
  5. Monital

    Monital Utente Attivo

    Registrato:
    15 Aprile 2009
    Messaggi:
    778
    Mi Piace Ricevuti:
    2
    Punteggio:
    18
    ciao allora mi fermo un attimo qua, aggiungendo questa stringga non solo mi nasconde la barra ma mi nasconde anche la tabella che visualizzo. ho soloa ggiunto quella riga (mi piace provare le cose una la volta)

    per il mi nasc onde intendo che nonve do nemmeno caricarla ma solo erp una frazioen dis econdo
     
    Ultima modifica: 28 Agosto 2016
  6. livellacri

    livellacri Utente Attivo

    Registrato:
    18 Agosto 2016
    Messaggi:
    108
    Mi Piace Ricevuti:
    13
    Punteggio:
    18
    Sesso:
    Maschio
    Forse è perché lo span della barra non è chiuso ;)
     
  7. Monital

    Monital Utente Attivo

    Registrato:
    15 Aprile 2009
    Messaggi:
    778
    Mi Piace Ricevuti:
    2
    Punteggio:
    18
    niente la barra non si vede

    Codice:
    <script type="text/javascript">
        $(document).ready(function() {
            var p =10;
            s = setInterval(function() {
                $("#barra").css("width", p + "%");
                $("#percentuale").html(p + "%");
                p++;
                if (p > 100)
                    clearInterval(s);
                    $("#barra").hide();
            }, 80);
        });
    </script>
    PHP:
    echo'<div id="dx"><span>In Aggiornamento</span><span id="barra"><span id="percentuale"></span></span></div>';
     
  8. livellacri

    livellacri Utente Attivo

    Registrato:
    18 Agosto 2016
    Messaggi:
    108
    Mi Piace Ricevuti:
    13
    Punteggio:
    18
    Sesso:
    Maschio
    Non hai messo le parentesi graffe all'if e quindi la barra viene nascosta anche se non è al 100%
     
  9. Monital

    Monital Utente Attivo

    Registrato:
    15 Aprile 2009
    Messaggi:
    778
    Mi Piace Ricevuti:
    2
    Punteggio:
    18
    ah ok perfetto, come in php che se c'è più di un istruzione si deve mettere la graffa, okokok.
    funziona però un ultima cortesia. la soluzione da te proposta per la durata della barra non è fattibile eprchè la mia è una ricerca dati su di un file json esterno quindi diventa complicata inserire ogni tot righe ..quindi mi acconterei di qeusto

    dove inserisco il tempo di progressione. poniamo che voglio far durare la barra 20 secondi e poi nasconderla?

    p.s. ma quell'80 alla fine dellos cript cos rappresenta?
     
  10. livellacri

    livellacri Utente Attivo

    Registrato:
    18 Agosto 2016
    Messaggi:
    108
    Mi Piace Ricevuti:
    13
    Punteggio:
    18
    Sesso:
    Maschio
    L'80 rappresenta l'intervallo di tempo (in millisecondi) dell'incremento della barra.
    Quindi se la vuoi fare durare 20 secondi, partendo dal 10% (come indicato da p), devi sostituire 80 con 222
    Codice:
    20 secondi (durata voluta) * 1000 (trasformi in millisecondi) / 90% (percentuale rimanente) = circa 222
    
     
    A Monital piace questo elemento.
  11. Monital

    Monital Utente Attivo

    Registrato:
    15 Aprile 2009
    Messaggi:
    778
    Mi Piace Ricevuti:
    2
    Punteggio:
    18
    perfettissimo sei un grande, bella dritta.
     
  12. pippuccio76

    pippuccio76 Nuovo Utente

    Registrato:
    21 Luglio 2013
    Messaggi:
    20
    Mi Piace Ricevuti:
    1
    Punteggio:
    3
    Ma è possibile collegarla all'upload di un file ?

    ho un formdata a cui faccio l'append del file più altri dati il 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 php fa solo echo del file ricevuto
     
Sto caricando...

Condividi questa Pagina