pagina - Barra de progreso de carga de archivo con jQuery

subir archivos jquery (8)

Estoy tratando de implementar una característica de carga de archivos AJAX en mi proyecto. Estoy usando jQuery para esto; mi código envía los datos usando AJAX. También quiero implementar una barra de progreso de carga de archivos. ¿Cómo puedo hacer esto? ¿Hay alguna forma de calcular cuánto se ha subido para poder calcular el porcentaje cargado y crear una barra de progreso?

Esto resolvió mi problema

$.ajax({ xhr: function() { var xhr = new window.XMLHttpRequest(); xhr.upload.addEventListener("progress", function(evt) { if (evt.lengthComputable) { var percentComplete = evt.loaded / evt.total; percentComplete = parseInt(percentComplete * 100); var $link = $(''.''+ids); var $img = $link.find(''i''); $link.html(''Uploading..(''+percentComplete+''%)''); $link.append($img); } }, false); return xhr; }, url: posturlfile, type: "POST", data: JSON.stringify(fileuploaddata), contentType: "application/json", dataType: "json", success: function(result) { console.log(result); } });

He hecho esto solo con jQuery:

$.ajax({ xhr: function() { var xhr = new window.XMLHttpRequest(); xhr.upload.addEventListener("progress", function(evt) { if (evt.lengthComputable) { var percentComplete = evt.loaded / evt.total; percentComplete = parseInt(percentComplete * 100); console.log(percentComplete); if (percentComplete === 100) { } } }, false); return xhr; }, url: posturlfile, type: "POST", data: JSON.stringify(fileuploaddata), contentType: "application/json", dataType: "json", success: function(result) { console.log(result); } });

He utilizado lo siguiente en mi proyecto. usted puede intentarlo también

ajax = new XMLHttpRequest(); ajax.onreadystatechange = function () { if (ajax.status) { if (ajax.status == 200 && (ajax.readyState == 4)){ //To do tasks if any, when upload is completed } } } ajax.upload.addEventListener("progress", function (event) { var percent = (event.loaded / event.total) * 100; //percent variable can be used for modifying the length of your progress bar. console.log(percent); }); ajax.open("POST", ''your file upload link'', true); ajax.send(formData); //ajax.send id for sending upload form data.

JavaScript:

Estilos:

Si está utilizando jquery en su proyecto y no desea implementar el mecanismo de carga desde cero, puede utilizar https://github.com/blueimp/jQuery-File-Upload .

Tienen una aplicación api muy buena con selección múltiple de archivos, soporte de arrastrar y soltar, barra de progreso, validación e imágenes de vista previa, soporte entre dominios, cargas de archivos reanudables y resumidas. Y tienen scripts de ejemplo para múltiples lenguajes de servidor (nodo, php, python y go).

URL de demostración: https://blueimp.github.io/jQuery-File-Upload/ .

aquí hay un uso más completo de jquery 1.11.x $ .ajax ():

mira esto: http://hayageek.com/docs/jquery-upload-file.php Lo he encontrado accidentalmente en la red.

Nota: esta pregunta está relacionada con el complemento de formulario jQuery . Si está buscando una solución jQuery pura, comience aquí . No existe una solución jQuery global para todos los navegadores. Entonces debes usar un plugin. Estoy usando dropzone.js , que tiene una alternativa fácil para navegadores más antiguos. El complemento que prefieras depende de tus necesidades. Hay muchos buenos posts para comparar, como this , this o this .

De los examples :

jQuery:

$(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) { status.html(xhr.responseText); } }); });

html:

<form action="file-echo2.php" method="post" enctype="multipart/form-data"> <input type="file" name="myfile"><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>

tienes que diseñar la barra de progreso con css ...