Upload dan Extrak File Zip Menggunakan PHP Script dan AJAX
Hai Sobat.
Kembali lagi bersama Portal Coding. Sudah lama tidak update ya hehehe.. Karena admin baru lulus jadi sibuk daftar kuliah sama urusan lain juga.
Oke pada pembahasan kali ini kita akan memabahas mengenai Upload dan Extrak File Zip Menggunakan PHP Script dan AJAX. Penasaran gak? pasti penasaran kan hehhehe. Pada pemabahasan ini kita akan menggunakan bahasa pemrograman PHP dan juga AJAX . Dan juga disini kita menggunakan php berbasis OOP.
Baiklah langsung saja kita membuatnya. Adapun file yang kita butuhkan adalah antara lain :
- File JQuery
- File Bootstrap 3
- PHP
- AJAX
Adapun untuk codingnya silahkan simak dibawah ini.
Silahkan buat sebuah file PHP dengan nama index.php .
Index.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Progress Bar</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="container" style="margin-top:10px;">
<div class="row">
<div class="col-xs-12">
<form method="POST" enctype="multipart/form-data">
<div class="form-group">
<label for="InputFile">File input</label>
<input type="file" id="InputFile" name="file_zip">
</div>
<div class="form-group">
<input type="submit" class="btn btn-primary" value="Upload">
</div>
</form>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<div class="progress" id="progresstheme" style="display:none;">
<div id="progressBar" class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width:0%">
<span class="sr-only">0% Complete</span>
</div>
</div>
<div id="infoextrak">
</div>
<div id="infoupload">
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="script.js" charset="utf-8"></script>
</body>
</html>
Kemudian silahkan buat file PHP lagi dengan nama upload.php
Upload.php
<?php
if (!empty($_FILES["file_zip"])) {
$file_zip = $_FILES['file_zip']['tmp_name'];
$direktori = "upload/";
$zip = new ZipArchive;
if ($zip->open($file_zip) === TRUE) {
// for ($i=0; $i < $zip->numFiles; $i++) {
// $fileInfo = $zip->statIndex($i);
// // echo "extracting".$fileInfo['name'];
// }
$zip->extractTo($direktori);
$zip->close();
}
}
?>
Kemudian buat file Javascript dengan nama script.js. Disini javascript kita gunakan untuk menjalankan ajax dan juga progressbar bootstrap serta notifikasi jika proses extrak sudah selesai.
Script.js
$(document).ready(function() {
$('form').on('submit', function(event){
var fileExtension = ['zip'];
if ($("#InputFile").val()=="") {
alert("You must be insert a file to upload.");
} else if ($.inArray($("#InputFile").val().split('.').pop().toLowerCase(), fileExtension) == -1) {
alert("Only formats zip are allowed" );
} else {
event.preventDefault();
var formData = new FormData($('form')[0]);
$.ajax({
xhr : function() {
var xhr = new window.XMLHttpRequest();
$('#progresstheme').css("display","block");
xhr.upload.addEventListener('progress', function(e){
var percent = Math.round((e.loaded / e.total) * 100);
$('#progressBar').attr('aria-valuenow', percent).css('width', percent + '%').text(percent + '%');
if (percent==100) {
$('#progresstheme').fadeOut("slow");
$('#infoextrak').html("<div class='alert alert-success'><div style='float:left;'>Extracting data ...</div><div class='col-md-offset-3'><img src='Gear-4.5s-26px.gif' id='imginfoextrack' class='img img-responsive text-right'></div></div>");
}
});
return xhr;
},
type : 'POST',
url : 'upload.php',
data : formData,
processData : false,
contentType : false,
success : function(response){
$('#infoupload').html("<div class='alert alert-success'><i class='fa fa-check'></i> Sukses Upload</div>");
setInterval(function(){
$("#infoextrak").fadeOut("slow");
},500);
$('form')[0].reset();
},
error : function(response){
console.log(response);
}
});
}
});
});
Setelah semua file telah di buat silahkan di save lalu dijalankan.
Untuk melihat hasilnya silahkan lihat di screenshot dibawah ini.
Oh iya, kalian bisa mendownload source code nya dari coding diatas. Silahkan download dibawah ini.
Sekian dulu untuk pembahasan kali ini,jangan lupa dipelajari dan di praktekkan agar lebih menguasai materinya. Jangan lupa komentar dan shere artikel ini agar lebih bermanfaat, terima kasih.
0 Response to "Upload dan Extrak File Zip Menggunakan PHP Script dan AJAX"
Post a Comment