Saludos en este post voy explicar como subir un archivo con ajax y mostrando los porcentajes en una barra de progreso mientras el archivo esta subiendo.
Ahora veamos una implementacion en el código..
Aqui tengo un formulario con un id "formulario" y el atributo action="test.php" que es donde
tengo escrito el backend que guarda el archivo que viene del formulario , Luego debajo del formulario incluyo la etiqueta <progress> de html5 para emitr el valor del % subido del archivo.
importante! debes incluir el atributo enctype="multipart/form-data" o de lo contrario no podrás
enviar archivos por medio del formulario.
Este es el siguiente codigo donde estoy trabajando con ajaxForm lo tengo al final del código de html
este script es lo que hace capaz de que puedas subir el archivo de forma asíncrona ,en el parámetro progreso que esta al lado de total es donde la subida asíncrona emite el % que ya tiene subido al servidor , cada vez que aumenta un 1% se emite y se lo pasa de valor a la barra de html5 <progress>
para que se muestre actualizandose mientras sube el archivo
Como hacer una barra de upload mientras subo un archivo, como hacer una barra con porciento php,
subir archivo de forma asincrona con ajax, como hacer una barra de progreso javascript,como hacer una barra de progreso en la web
En primer lugar debemos incluir las librerías de jquery para hacer esto en esta imagen le mostrare cuales son.
La segunda es un plugin de jquery que permite trabajar con formularios fácilmente, así subiendo archivos de forma asíncrona.
<script src="http://code.jquery.com/jquery-2.1.1-rc2.min.js" ></script>
<script src="http://malsup.github.com/jquery.form.js"></script>
La segunda es un plugin de jquery que permite trabajar con formularios fácilmente, así subiendo archivos de forma asíncrona.
<script src="http://code.jquery.com/jquery-2.1.1-rc2.min.js" ></script>
<script src="http://malsup.github.com/jquery.form.js"></script>
Ahora veamos una implementacion en el código..
<!DOCTYPE html>
<html>
<head>
<title>Test form</title>
<script src="http://code.jquery.com/jquery-2.1.1-rc2.min.js" ></script>
<script src="http://malsup.github.com/jquery.form.js"></script>
</head>
<body>
<form id="formulario" enctype="multipart/form-data" action="test.php" method="post">
<input type="file" name="archivo">
<input type="submit" value="upload">
</form>
<progress value="0" max="100" id="progress">
</body>
</html>
<html>
<head>
<title>Test form</title>
<script src="http://code.jquery.com/jquery-2.1.1-rc2.min.js" ></script>
<script src="http://malsup.github.com/jquery.form.js"></script>
</head>
<body>
<form id="formulario" enctype="multipart/form-data" action="test.php" method="post">
<input type="file" name="archivo">
<input type="submit" value="upload">
</form>
<progress value="0" max="100" id="progress">
</body>
</html>
Aqui tengo un formulario con un id "formulario" y el atributo action="test.php" que es donde
tengo escrito el backend que guarda el archivo que viene del formulario , Luego debajo del formulario incluyo la etiqueta <progress> de html5 para emitr el valor del % subido del archivo.
importante! debes incluir el atributo enctype="multipart/form-data" o de lo contrario no podrás
enviar archivos por medio del formulario.
Este es el siguiente codigo donde estoy trabajando con ajaxForm lo tengo al final del código de html
este script es lo que hace capaz de que puedas subir el archivo de forma asíncrona ,en el parámetro progreso que esta al lado de total es donde la subida asíncrona emite el % que ya tiene subido al servidor , cada vez que aumenta un 1% se emite y se lo pasa de valor a la barra de html5 <progress>
para que se muestre actualizandose mientras sube el archivo
<script type="text/javascript">
$(document).ready(function(){
$('#formulario').ajaxForm({
beforeSend:function(){
},
uploadProgress:function(evento,pos,total,progreso){
console.log(total);
$('#progress').val(progreso); //Aqui asigna el valor actual de la
subida al progress
},
success:function(){
console.log("exito");
}
complete:()=>{
}
});
});
</script>
$(document).ready(function(){
$('#formulario').ajaxForm({
beforeSend:function(){
},
uploadProgress:function(evento,pos,total,progreso){
console.log(total);
$('#progress').val(progreso); //Aqui asigna el valor actual de la
subida al progress
},
success:function(){
console.log("exito");
}
complete:()=>{
}
});
});
</script>
subir archivo de forma asincrona con ajax, como hacer una barra de progreso javascript,como hacer una barra de progreso en la web
Comentarios
Publicar un comentario