Индикатор выполнения загрузки файла с помощью jQuery

Я пытаюсь реализовать функцию загрузки файлов AJAX в моем проекте. Я использую jQuery для этого; мой код отправляет данные с помощью AJAX. Я также хочу реализовать индикатор выполнения загрузки файла. Как я могу это сделать? Есть ли способ рассчитать, сколько уже было загружено, чтобы я мог рассчитать процентное количество загруженных и создать индикатор выполнения?

Примечание. Этот вопрос связан с плагином формы jQuery . Если вы ищете чистое решение jQuery, начните здесь . Нет общего решения jQuery для всех браузеров. Поэтому вы должны использовать плагин. Я использую dropzone.js , которые имеют простой резерв для старых браузеров. Какой плагин вы предпочитаете, зависит от ваших потребностей. Есть много хороших сравнительных сообщений, вроде этого , и того, и другого .

Из примеров :

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:

 

0%

вам нужно создать панель прогресса с помощью css …

Я сделал это только с помощью 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); } }); 

В моем проекте я использовал следующее. вы тоже можете попробовать.

 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 is for uploading form data. в 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 is for uploading form data. 

проверьте это: http://hayageek.com/docs/jquery-upload-file.php Я нашел его случайно в сети.

Если вы используете jquery в своем проекте и не хотите внедрять механизм загрузки с нуля, вы можете использовать https://github.com/blueimp/jQuery-File-Upload .

У них очень приятный api с возможностью выбора нескольких файлов, поддержкой перетаскивания, индикацией выполнения, проверкой и просмотром изображений, поддержкой междоменной поддержки, загрузкой и возобновлением файлов. И у них есть примеры скриптов для нескольких языков сервера (узел, php, python и go).

Демо-URL: https://blueimp.github.io/jQuery-File-Upload/ .

вот более полный вид использования jquery 1.11.x $ .ajax ():

  

Это решило мою проблему

 $.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); } }); 
  • VB.NET progressbar backgroundworker
  • Каков наилучший способ показать прогресс в вызове Ajax?
  • Как разместить текст на ProgressBar?
  • Как мы можем показать индикатор выполнения для загрузки с помощью FtpWebRequest
  • C # Winform ProgressBar и BackgroundWorker
  • Как создать индикатор выполнения NSURLConnection при загрузке файла?
  • Давайте будем гением компьютера.