Dalam tutorial ini, kita akan menampilkan progress bar selama proses upload file AJAX menggunakan jQuery. Kami menggunakan pustaka formulir jQuery dan pembaruan fungsi$(form).ajaxSubmit() untuk mengirimkan data formulir ke halaman PHP
Setelah melanjutkan pengunggahan gambar, kami menampilkan pratinjau ke pemilih target
Lihat DemoUnduh
Formulir Pengunggahan File yang menunjukkan Bilah Kemajuan
Dalam formulir ini, kami memiliki bidang input file dan bilah progres untuk menampilkan progres unggahan file
Awalnya, lebar bilah kemajuan diatur ke 0 yang akan ditingkatkan secara bertahap berdasarkan kemajuan yang diselesaikan
jQuery Progress bar for PHP AJAX File Upload
Progress Bar
Upload Image File:
Kirim Formulir jQuery
$(formulir). ajaxSubmit() berisi serangkaian opsi untuk melacak progres panggilan AJAX. jQuery uploadProgress memperbarui status bilah progres dengan progres pengunggahan yang saat ini sudah selesai. Naskahnya adalah,
$(document).ready(function() { $('#uploadForm').submit(function(e) { if ($('#userImage').val()) { e.preventDefault(); $('#loader-icon').show(); $(this).ajaxSubmit({ target: '#targetLayer', beforeSubmit: function() { $("#progress-bar").width('0%'); }, uploadProgress: function(event, position, total, percentComplete) { $("#progress-bar").width(percentComplete + '%'); $("#progress-bar").html('' + percentComplete + ' %
') }, success: function() { $('#loader-icon').hide(); }, resetForm: true }); return false; } }); }); _Kode unggahan file PHP sama seperti yang telah kita lihat untuk unggahan gambar tunggal dan ganda menggunakan jQuery
Kode ini mengembalikan HTML gambar dengan sumber gambar yang diunggah. Ini akan menampilkan pratinjau di browser menggunakan skrip panggilan balik
Ukuran file. 4. Total 82 KBViews. 27085Pembaruan Terakhir. 12/26/2018 00. 57. 00 UTC Tanggal Publikasi. 05/05/2018 01. 57. 27 Situs Resmi UTC. Pergi ke situs web Lisensi. MIT
Unduh Demo
Lainnya dalam kategori ini
Lihat Plugin yang Direkomendasikan
TOP 100 Plugin jQuery 2022
Chrome, IE9+, FireFox, Opera, Safari#Bootstrap#pengunggah#unggah
Unggah kemajuan. Plugin js jQuery membantu Anda membuat bilah progres bergaya yang mudah untuk menampilkan progres pengunggahan saat ini saat Anda mengunggah file ke server
Bagaimana cara menggunakannya
1. Unduh dan tempatkan file JavaScript jquery-progress-upload.js_ setelah jQuery JavaScript library tetapi sebelum tag body penutup
<script src="//code.jquery.com/jquery-3.3.1.min.js" integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" crossorigin="anonymous"> </script> <script src="./src/jquery-progress-upload.js"></script>2. Buat pengunggah file dasar di halaman
<form action="#" method="post" enctype="multipart/form-data"> <input type="file" id="file"> <input type="submit" value="upload"> </form>3. Inisialisasi pengunggah file dengan penangan peristiwa berikut
$('#file').setProgressedUploader({ onInit: function (elements) { // triggered on init }, onGetFile: function (elements) { // triggered on get file }, onStartSubmitting: function (elements) { // triggered when starting uploading }, onProcessing: function (elements) { // triggered when processing }, onFinish: function (elements, data) { // triggered on finish }, onError: function(e){ // triggered on error } }); _4. Kode contoh (C#) untuk menangani file di sisi server
var file = Request.Form.Files.First(); var fileStream = new FileStream(GetCurrentDirectory(), FileMode.Create); await file.CopyToAsync(fileStream);5. Atur gaya bilah kemajuan unggahan menggunakan CSS Anda sendiri
#progress { /* your styles here */ } #progressbar { /* your styles here */ } #message { /* your styles here */ } _6. Atau langsung menggunakan komponen progress bar Bootstrap
<link rel="stylesheet" href="/path/to/bootstrap.min.css"> <script src="/path/to/bootstrap.min.js"></script>Changelog
26-12-2018
- Pembaruan JS
Plugin jQuery yang luar biasa ini dikembangkan oleh Anduin2017. Untuk Penggunaan Lanjutan lainnya, silakan periksa halaman demo atau kunjungi situs web resmi