Porcentaje de la barra de progreso de jQuery simple

He estado tratando de encontrar un tutorial sencillo que muestre los conceptos básicos de cómo agregar un porcentaje de progreso a la carga de mi archivo, ya he creado la parte de carga de archivo por lo que no quiero un complemento viene con ambos, quiero poder codificar la barra de progreso yo mismo, pero necesito ayuda sobre cómo hacerlo. Quiero aprender cómo funciona, no solo quiero un plugin que lo haga todo para mí.Porcentaje de la barra de progreso de jQuery simple

¡Cualquier ayuda sería muy apreciada, gracias!

Estoy interesado en cómo obtener el porcentaje de la carga del archivo, no realmente en la barra de progreso en sí. Quiero poder tener un porcentaje preciso.

Fuente

2012-08-26 Dylan Cross

vistazo aquí:

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

Prueba esto: -

este es mi código 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>

mi código 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!"; 
} 
?>

Fuente

2012-08-26 16:57:08

Este es mi código probado. Carga de archivos con la barra de progreso porcentual. intentalo. –

SALVADOR. Esta respuesta me salvó después de 3 días de lucha continua. Muchas gracias bhaijaan Abid. – trollster

@IliaRostovtsev, el objetivo de publicar el código, así como el enlace, es que si el enlace no está disponible (temporal o permanentemente) el código aún está disponible en este sitio para que las personas puedan verlo y usarlo. No solo publique vínculos como respuestas, siempre proporcione el código. – TheCarver

Por favor, eche un vistazo, creo que le resultará útil. ¡Es jQuery y tiene porcentaje de progreso, tal como lo quería para su script de carga!

Live Demo jsFiddle

Si quieres aprender más complicado ejemplo, existe la escritura fiable que recomendaría,
llamada Uber Uploader - es jQuery y PHP.

Fuente

2012-08-26 17:01:11

Porcentaje de la barra de progreso de jQuery simple

Respuesta

Cuestiones relacionadas