Percentuale barra di avanzamento jQuery semplice

Ho cercato di trovare un semplice tutorial che mostra le nozioni di base su come aggiungere una percentuale di avanzamento al caricamento del mio file, ho già costruito la parte di caricamento del file quindi non voglio un plugin che viene fornito con entrambi, voglio essere in grado di codificare la barra di avanzamento, ma ho bisogno di aiuto su come farlo. Voglio imparare come funziona, non voglio solo un plugin che faccia tutto per me.Percentuale barra di avanzamento jQuery semplice

Qualsiasi aiuto sarebbe molto apprezzato, grazie!

Sono solo interessato a come ottenere la percentuale del caricamento del file, non proprio sulla barra di avanzamento stessa. Voglio essere in grado di avere una percentuale accurata.

fonte

2012-08-26 Dylan Cross

un'occhiata qui:

http://jquery.malsup.com/form/progress.html

Prova questa: -

Questo è il mio codice html

<!doctype html> 
<head> 
<title>File Upload Progress Demo #1</title> 
<style> 
body { padding: 30px } 
form { display: block; margin: 20px auto; background: #eee; border-radius: 10px; padding: 15px } 

.progress { position:relative; width:400px; border: 1px solid #ddd; padding: 1px; border-radius: 3px; } 
.bar { background-color: #B4F5B4; width:0%; height:20px; border-radius: 3px; } 
.percent { position:absolute; display:inline-block; top:3px; left:48%; } 
</style> 
</head> 
<body> 
    <h1>File Upload Progress Demo #1</h1> 
    <code>&lt;input type="file" name="myfile"></code> 
     <form action="upload.php" method="post" enctype="multipart/form-data"> 
     <input type="file" name="uploadedfile"><br> 
     <input type="submit" value="Upload File to Server"> 
    </form> 

    <div class="progress"> 
     <div class="bar"></div > 
     <div class="percent">0%</div > 
    </div> 

    <div id="status"></div> 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script> 
<script src="http://malsup.github.com/jquery.form.js"></script> 
<script> 
(function() { 

var bar = $('.bar'); 
var percent = $('.percent'); 
var status = $('#status'); 

$('form').ajaxForm({ 
    beforeSend: function() { 
     status.empty(); 
     var percentVal = '0%'; 
     bar.width(percentVal) 
     percent.html(percentVal); 
    }, 
    uploadProgress: function(event, position, total, percentComplete) { 
     var percentVal = percentComplete + '%'; 
     bar.width(percentVal) 
     percent.html(percentVal); 
    }, 
    complete: function(xhr) { 
    bar.width("100%"); 
    percent.html("100%"); 
     status.html(xhr.responseText); 
    } 
}); 

})();  
</script> 

</body> 
</html>

mio codice php

<?php 
$target_path = "uploads/"; 

$target_path = $target_path . basename($_FILES['uploadedfile']['name']); 

if(move_uploaded_file($_FILES['uploadedfile']['tmp_name'], $target_path)) { 
    echo "The file ". basename($_FILES['uploadedfile']['name']). 
    " has been uploaded"; 
} else{ 
    echo "There was an error uploading the file, please try again!"; 
} 
?>

fonte

2012-08-26 16:57:08

Questo è il mio codice testato. Caricamento file con barra di avanzamento percentuale. Provalo. –

SAVIOR. Questa risposta mi ha salvato dopo 3 giorni di continua lotta. Grazie mille bhaijaan Abid. – trollster

@IliaRostovtsev, l'intero punto del codice di pubblicazione e il collegamento, è se il collegamento diventa non disponibile (temporaneamente o permanentemente) il codice è ancora disponibile su questo sito per le persone a guardare e utilizzare. Non limitarti a postare link come risposte, fornisci sempre il codice. – TheCarver

Si prega di dare un'occhiata, penso che troverete questo utile. È jQuery e ha una percentuale di progresso, proprio come volevi per il tuo script di caricamento!

Live Demo jsFiddle

Se volete saperne di esempio più complicato, c'è scritto affidabile mi sento di raccomandare,
chiamato Uber Uploader - è jQuery e PHP.

fonte

2012-08-26 17:01:11

Percentuale barra di avanzamento jQuery semplice

risposta

Problemi correlati