Upload gambar / file harus selalu memiliki progress bar. Ini adalah fitur yang diabaikan sebagian besar pengembang. Itu harus dilihat sebagai bagian dari fungsionalitas.  Ketika pengguna meminta server untuk melakukan beberapa operasi, itu baik untuk menunjukkan kepada mereka tentang progress. Ini adalah progress UI / UX yang baik. progress bar adalah salah satu cara terbaik untuk menunjukkan status operasi yang sedang berlangsung.

Pilihan input file digunakan untuk memilih gambar dan file binari yang diposting ke PHP melalui AJAX. Setelah mengirim permintaan unggah file ke PHP, skrip AJAX menginisialisasi animasi jQuery untuk menampilkan progress proses unggah file. progress bar akan menyoroti persentase progresif dengan animasi jQuery. Plugin jQuery Form digunakan dalam kode contoh ini untuk menangani unggahan gambar AJAX dengan status progresif.

Formulir HTML dengan Upload File Gambar

Halaman arahan akan menampilkan form HTML dengan input file. Pengguna akan memilih file dan memposting data file dengan mengirimkan form melalui AJAX. Library jQuery dan jQuery Form disertakan di awal skrip. Skrip validasi jQuery minimal ditambahkan untuk memeriksa apakah file gambar telah dipilih sebelum mengirimkan form.

Form AJAX Submit untuk Meminta Upload File PHP dengan Progressbar

Library form jQuery digunakan untuk mengirimkan form melalui AJAX dengan progress bar animasi. Fungsi ajaxForm () digunakan untuk mengirimkan file gambar binari ke PHP. Kemajuan pengunggahan gambar ditunjukkan dengan progress bar dalam fungsi callback uploadProgress. Juga, metode jQuery animate () dipanggil untuk menciptakan efek progresif pada elemen progress bar.

Kode Unggah File PHP

Ini adalah kode PHP biasa yang digunakan untuk mengunggah file gambar ke folder target yang ditentukan. Data file disimpan dalam superglobal $ _FILES. Fungsi PHP move_uploaded_file () digunakan untuk menyalin file yang dikirimkan ke folder target upload.

jQuery Ajax Image Upload dengan Animating Progress Bar Output

Ini adalah output dari contoh upload gambar Ajax dengan progress bar menggunakan animasi jQuery.

Cara Upload Image jQuery Ajax dengan Animating Progress Bar

Oke itulah tadi pembahasan saya tentang Cara Upload Image jQuery Ajax dengan Animating Progress Bar, semoga bermanfaat.