Saltar al contenido

ejemplo de código de barras de progreso de carga de archivos

Ya no busques más por todo internet porque estás al lugar adecuado, poseemos la respuesta que buscas sin complicaciones.

Ejemplo 1: cargar la secuencia de comandos de la barra de progreso

postFile('thumbnail','progress-bar-thumbnail');//  "InputFile" & "ProgressBar" are ID of elements functionpostFile(InputFile,ProgressBar)var formdata =newFormData();

            formdata.append(InputFile,$('#'+InputFile)[0].files[0]);let request =newXMLHttpRequest();

            request.upload.addEventListener('progress',function(e)let file1Size =$('#'+InputFile)[0].files[0].size;if(e.loaded<= file1Size)let percent =Math.round(e.loaded/ file1Size *100);$('#'+ProgressBar).width(percent +'%').html(percent +'%');if(e.loaded== e.total)$('#'+ProgressBar).width(100+'%').html(100+'%'););// instead of '/admin/blog', write your form action
            request.open('post','/admin/blog');
            request.timeout=45000;
            request.send(formdata);

Ejemplo 2: carga de archivo con barra de progreso

<script src="js/code_js.js" type="text/javascript"></script><script src="js/code_js1.js" type="text/javascript"></script><script type="text/javascript">$(document).ready(function()$('#upload_container').submit(function(e)if($('#userImage').val())			e.preventDefault();$('#loader-icon').show();$(this).ajaxSubmit( 				target:'#targetLayer',beforeSubmit:function()$("#progress-bar").width('0%');,uploadProgress:function(event, position, total, percentComplete)$("#progress-bar").width(percentComplete +'%');$("#progress-bar").html('
'+ percentComplete +' %
'
),success:function()$('#loader-icon').hide();, resetForm:true);returnfalse;););</script>

Ejemplo 3: carga de archivo con barra de progreso

<center><form id="upload_container" action="upload.php" method="post"><div><label>UploadImageFile:</label><input name="userImage" id="userImage" type="file"class="demoInputBox"/></div><br /><div><input type="submit" id="btnSubmit" value="Submit"class="btnSubmit"/></div><div id="progress-div"><div id="progress-bar"></div></div><div id="targetLayer"></div></form><div id="loader-icon" style="display:none;"><img src="loading.gif"/></div></center>

Aquí tienes las comentarios y puntuaciones

Tienes la opción de añadir valor a nuestra información participando con tu veteranía en las críticas.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *