
Fitur upload file adalah fungsi yang paling banyak digunakan untuk website-website dinamis. Fungsionalitas upload file dapat dengan mudah diimplementasikan menggunakan PHP. Secara umum, halaman di-refresh ketika kamu mengupload file menggunakan PHP. Untuk membuat upload file ini menjadi mudah digunakan, jQuery dan AJAX dapat digunakan untuk mengupload file/gambar tanpa me-refresh halaman.
Saat file diupload ke server, halaman web tetap pada status pemuatan. Sangat sulit bagi pengguna untuk melacak kemajuan unggahan. Progress Bar sangat berguna untuk mengatasi masalah ini dengan menunjukkan proses upload dalam format yang dapat dibaca manusia. Progress Bar adalah elemen grafis yang memvisualisasikan perkembangan operasi. Secara umum, Progress Bar digunakan untuk menampilkan representasi kemajuan dalam format persentase untuk mengupload, mendownload, installasi, dll.
Dalam tutorial ini, saya akan mengimplementasikan fungsionalitas berikut:
- Form HTML untuk memilih file.
- Menampilkan progess bar saat proses upload sedang berlangsung menggunakan jQuery.
- Menambahkan persentase penyelesaian upload ke progess bar secara real-time menggunakan AJAX.
- Upload file ke server menggunakan PHP.
Form Upload File dengan Progress Bar
File index.html
menangani pemilihan file dan menampilkan progress proses upload.
Form Upload File
1. Membuat form HTML dengan bidang input file dan tombol kirim.
- Tag
<form>
harus ada atributenctype="multipart/form-data"
. - Tag
<input>
harus ada atributtype="file"
.
<!-- Form upload file --> <form id="uploadForm" enctype="multipart/form-data"> <input type="file" name="file" id="fileInput"> <input type="submit" name="submit" value="UPLOAD"/> </form>
2. Elemen HTML untuk menampilkan progress bar.
<!-- Progress bar --> <div class="progress"> <div class="progress-bar"></div> </div>
3. Elemen HTML untuk menampilkan status upload file.
<!-- Menampilkan status upload (sukses/gagal) --> <div id="uploadStatus"></div>
Upload File AJAX dengan Progress Bar.
JQuery dan AJAX digunakan untuk mengunggah file dengan progress bar, jadi sertakan pustaka jQuery terlebih dahulu.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Kode jQuery berikut mengirimkan data file yang dipilih ke script upload.php
tanpa refresh halaman melalui AJAX.
- Pada pengiriman form, data file yang dipilih dikirim ke script
upload.php
menggunakan jQuery dan Ajax.- Opsi
xhr
dari metode$.ajax()
digunakan untuk melacak progress upload. - Metode
window.XMLHttpRequest()
yang membuat objek XMLHttpRequest baru. - Event
progress
upload XMLHttpRequest menunjukkan jumlah progress yang dibuat sejauh ini. - Persentase progress upload dilampirkan pada progress bar.
- Opsi
- Objek
FormData
digunakan untuk mengambil data file yang dikirimkan.- Berdasarkan respons, status unggahan ditampilkan di halaman web.
- Pada event
change()
, tipe file divalidasi berdasarkan tipe/ext yang diizinkan.- API File digunakan untuk mendapatkan tipe file yang dipilih.
- Jenis MIME dari file yang dipilih akan divalidasi dan membatasi pengguna untuk hanya mengunggah gambar (.jpeg / .jpg / .png / .gif) atau PDF (.pdf) atau file MS Word (.doc / .docx).
- Metode
includes()
menentukan apakah arrayallowedTypes
berisi tipe file yang dipilih.
<script> $(document).ready(function(){ // upload file via AJAX $("#uploadForm").on('submit', function(e){ e.preventDefault(); $.ajax({ xhr: function() { var xhr = new window.XMLHttpRequest(); xhr.upload.addEventListener("progress", function(evt) { if (evt.lengthComputable) { var percentComplete = ((evt.loaded / evt.total) * 100); $(".progress-bar").width(percentComplete + '%'); $(".progress-bar").html(percentComplete+'%'); } }, false); return xhr; }, type: 'POST', url: 'upload.php', data: new FormData(this), contentType: false, cache: false, processData:false, beforeSend: function(){ $(".progress-bar").width('0%'); $('#uploadStatus').html('<img src="loading.gif"/>'); }, error:function(){ $('#uploadStatus').html('<p style="color:#EA4335;">Upload file gagal, silakan coba lagi.</p>'); }, success: function(resp){ if(resp == 'ok'){ $('#uploadForm')[0].reset(); $('#uploadStatus').html('<p style="color:#28A74B;">File berhasil diupload!</p>'); }else if(resp == 'err'){ $('#uploadStatus').html('<p style="color:#EA4335;">Silakan pilih file yang valid untuk diupload.</p>'); } } }); }); // memvalidasi file $("#fileInput").change(function(){ var allowedTypes = ['application/pdf', 'application/msword', 'application/vnd.ms-office', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', 'image/jpeg', 'image/png', 'image/jpg', 'image/gif']; var file = this.files[0]; var fileType = file.type; if(!allowedTypes.includes(fileType)){ alert('Silakan pilih file yang valid (PDF/DOC/DOCX/JPEG/JPG/PNG/GIF).'); $("#fileInput").val(''); return false; } }); }); </script>
Upload File ke Server menggunakan PHP
File upload.php
dipanggil oleh permintaan AJAX untuk menangani proses upload file dengan PHP.
- Mengambil informasi file dari data yang dikirimkan menggunakan metode PHP $_FILES.
- Mengunggah file ke server menggunakan fungsi move_uploaded_file() di PHP.
- Menghasilkan status upload file.
<?php $upload = 'err'; if(!empty($_FILES['file'])){ // Konfigurasi upload file $targetDir = "uploads/"; $allowTypes = array('pdf', 'doc', 'docx', 'jpg', 'png', 'jpeg', 'gif'); $fileName = basename($_FILES['file']['name']); $targetFilePath = $targetDir.$fileName; // memeriksa apakah tipe file valid $fileType = pathinfo($targetFilePath, PATHINFO_EXTENSION); if(in_array($fileType, $allowTypes)){ // upload file ke server if(move_uploaded_file($_FILES['file']['tmp_name'], $targetFilePath)){ $upload = 'ok'; } } } echo $upload; ?>
http://demo.codingan.com/live/dl-sementara ngasih link nya yg bner bos!
?
terus cara untuk menampilkan link file nya gimana min?? supaya bisa dishare