Próbuję zaimplementować funkcję przesyłania plików AJAX w moim projekcie. Używam do tego jQuery; mój kod przesyła dane za pomocą AJAX. Chcę również zaimplementować pasek postępu przesyłania plików. W jaki sposób mogę to zrobić? Czy jest jakiś sposób, aby obliczyć, ile zostało już przesłane, abym mógł obliczyć procent przesłanych plików i utworzyć pasek postępu?
jquery
file-upload
progress-bar
Eddard Stark
źródło
źródło
Odpowiedzi:
Uwaga: to pytanie dotyczy wtyczki formularza jQuery . Jeśli szukasz czystego rozwiązania jQuery, zacznij tutaj . Nie ma ogólnego rozwiązania jQuery dla wszystkich przeglądarek. Musisz więc użyć wtyczki. Używam dropzone.js , które mają łatwą rezerwę dla starszych przeglądarek. Wybór wtyczki zależy od Twoich potrzeb. Istnieje wiele dobrych postów porównawczych.
Z przykładów :
jQuery:
html:
musisz stylizować pasek postępu za pomocą css ...
źródło
Zrobiłem to tylko z jQuery:
źródło
fileuploaddata
?fileuploaddata
.W moim projekcie wykorzystałem następujące elementy. Ty też możesz spróbować.
źródło
sprawdź to: http://hayageek.com/docs/jquery-upload-file.php Znalazłem to przypadkowo w sieci.
źródło
Jeśli korzystasz z jquery w swoim projekcie i nie chcesz implementować mechanizmu uploadu od podstaw, możesz skorzystać z https://github.com/blueimp/jQuery-File-Upload .
Mają bardzo ładny interfejs API z możliwością wyboru wielu plików, obsługą przeciągania i upuszczania, paskiem postępu, obrazami walidacji i podglądu, obsługą wielu domen, przesyłaniem plików podzielonych na fragmenty i wznowień. I mają przykładowe skrypty dla wielu języków serwera (node, php, python i go).
Adres URL wersji demonstracyjnej: https://blueimp.github.io/jQuery-File-Upload/ .
źródło
Oto bardziej kompletne użycie jquery 1.11.x $ .ajax ():
źródło
To rozwiązało mój problem
źródło
Odpowiedź Kathira jest świetna, ponieważ rozwiązuje ten problem za pomocą samego jQuery. Chciałem tylko dodać kilka dodatków do jego odpowiedzi, aby pracować z jego kodem z pięknym paskiem postępu HTML:
Oto kod HTML paska postępu, użyłem Bootstrap 3 dla elementu paska postępu:
źródło
JavaScript:
Style:
źródło