Я пытаюсь реализовать функцию загрузки файлов AJAX в моем проекте. Я использую JQuery для этого; мой код передает данные, используя AJAX. Я также хочу реализовать индикатор загрузки файла. Как я могу это сделать? Есть ли способ подсчитать, сколько уже загружено, чтобы я мог рассчитать процент загрузки и создать индикатор выполнения?
jquery
file-upload
progress-bar
Эддард Старк
источник
источник
Ответы:
Примечание. Этот вопрос связан с плагином формы jQuery . Если вы ищете чистое решение jQuery, начните здесь . Нет общего решения jQuery для всех браузеров. Таким образом, вы должны использовать плагин. Я использую dropzone.js , который имеет простой запасной вариант для старых браузеров. Какой плагин вы предпочитаете, зависит от ваших потребностей. Есть много хороших постов сравнения.
Из примеров :
JQuery:
HTML:
Вы должны стиль прогрессбар с CSS ...
источник
Я сделал это только с помощью jQuery:
источник
fileuploaddata
?fileuploaddata
.Я использовал следующее в моем проекте. ты тоже можешь попробовать
источник
проверить это: http://hayageek.com/docs/jquery-upload-file.php Я случайно нашел его в сети.
источник
Если вы используете jquery в своем проекте и не хотите реализовывать механизм загрузки с нуля, вы можете использовать https://github.com/blueimp/jQuery-File-Upload .
У них есть очень хороший API с множественным выбором файлов, поддержкой перетаскивания, индикатором выполнения, проверкой и предварительным просмотром изображений, междоменной поддержкой, фрагментированными и возобновляемыми загрузками файлов. И у них есть примеры скриптов для нескольких языков сервера (node, php, python и go).
URL демонстрации: https://blueimp.github.io/jQuery-File-Upload/ .
источник
Вот более полное использование jquery 1.11.x $ .ajax ():
источник
Это решило мою проблему
источник
Ответ Катира великолепен, поскольку он решает эту проблему только с помощью jQuery. Я просто хотел сделать некоторые дополнения к его ответу, чтобы обработать его код с красивой строкой прогресса HTML:
Вот HTML-код индикатора выполнения, я использовал Bootstrap 3 для элемента индикатора выполнения:
источник
JavaScript:
Стили:
источник