Saya mencoba menerapkan fitur unggah file AJAX di proyek saya. Saya menggunakan jQuery untuk ini; kode saya mengirimkan data menggunakan AJAX. Saya juga ingin menerapkan bilah kemajuan unggah file. Bagaimana saya bisa melakukan ini? Apakah ada cara untuk menghitung berapa yang sudah diunggah sehingga saya dapat menghitung persentase yang diunggah dan membuat bilah kemajuan?
jquery
file-upload
progress-bar
Eddard Stark
sumber
sumber
Jawaban:
Catatan: Pertanyaan ini terkait dengan plugin formulir jQuery . Jika Anda mencari solusi jQuery murni, mulailah dari sini . Tidak ada solusi jQuery keseluruhan untuk semua browser. Jadi, Anda harus menggunakan plugin. Saya menggunakan dropzone.js , yang mudah mundur untuk peramban yang lebih lama. Plugin mana yang Anda sukai tergantung pada kebutuhan Anda. Ada banyak postingan perbandingan yang bagus di luar sana.
Dari contoh - contoh :
jQuery:
html:
Anda harus memberi style pada progressbar dengan css ...
sumber
Saya telah melakukan ini hanya dengan jQuery:
sumber
fileuploaddata
?fileuploaddata
.Saya telah menggunakan yang berikut ini dalam proyek saya. Anda bisa mencobanya juga.
sumber
lihat ini: http://hayageek.com/docs/jquery-upload-file.php Saya tidak sengaja menemukannya di internet.
sumber
Jika Anda menggunakan jquery pada proyek Anda, dan tidak ingin menerapkan mekanisme unggah dari awal, Anda dapat menggunakan https://github.com/blueimp/jQuery-File-Upload .
Mereka memiliki api yang sangat bagus dengan banyak pilihan file, dukungan drag & drop, bilah progres, validasi dan pratinjau gambar, dukungan lintas-domain, unggahan file yang terpotong dan dapat dilanjutkan. Dan mereka memiliki skrip sampel untuk berbagai bahasa server (node, php, python, dan go).
Demo url: https://blueimp.github.io/jQuery-File-Upload/ .
sumber
Berikut adalah jquery tampak lebih lengkap 1,11.x $ .ajax () penggunaan:
sumber
Ini menyelesaikan masalah saya
sumber
Jawaban Kathir luar biasa saat dia memecahkan masalah itu hanya dengan jQuery. Saya hanya ingin menambahkan jawaban untuk mengerjakan kodenya dengan bilah progres HTML yang indah:
Ini adalah kode HTML progress bar, saya menggunakan Bootstrap 3 untuk elemen progress bar:
sumber
JavaScript:
Gaya:
sumber