Bilah kemajuan pengunggahan file dengan jquery bootstrap

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="https://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

Bagaimana cara menampilkan bilah kemajuan saat mengunggah file?

Bagaimana cara menampilkan kemajuan unggahan di jQuery?

Bagaimana cara menampilkan bilah kemajuan saat mengunggah file dalam JavaScript?

Bagaimana cara mengunggah file di jQuery?