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/
 
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