Some text some message..
Some text some message..
Some text some message..
Some text some message..
  • Beranda
  • »
  • Artikel
  • »
  • Cara Upload File Berukuran Besar Dengan Tekhnik Chunk File (Memecah File)

Cara Upload File Berukuran Besar Dengan Tekhnik Chunk File (Memecah File)

previous Previous Page

Mengupload file ke server dengan ukuran file sekitar 1 Megabyte dapat dikerjakan melalui program PHP dengan mudah. Namun bagaimana jika ingin mengupload file dengan ukuran besar di atas 10 Megabyte, 50 Megabyte, 500 Megabyte atau bahkan 1 Gigabyte langsung ke server? Pertanyaan yang susah dijawab namun masih bisa dilakukan.

File atau data yang akan dikirimkan menuju server juga memiliki batasan dalam hal ukuran file yang bisa ditransfer. Misalnya pada CPanel hosting sendiri, maximum file size biasanya hanya mampu mengirimkan file dengan batas ukuran tidak lebih dari 128 MB saja. Masalah lain yang muncul adalah waktu yang diperlukan untuk mengirim file tersebut. Jika proses upload file memakan waktu lebih dari 3 menit biasanya akan memicu munculnya pesan kesalahan Connection Time Out. Begitu juga semakin lama waktu upload juga akan mempengaruhi antrian data pada server sehingga pesan kesalahan berupa Server Busy juga bisa muncul. Hal ini bisa menyebabkan proses uploading file diputus oleh server begitu saja sebelum file terkirim secara utuh.

Pengiriman file dengan ukuran besar menuju server masih dapat dilakukan, namun file tersebut harus dipecah terlebih dahulu menjadi bagian-bagian yang lebih kecil. Bagian - bagian tersebut kemudian dikirim menuju server satu demi satu. Setelah semuanya berhasil terkirim, hal selanjutnya adalah menggabungkan bagian kecil tersebut satu persatu sehingga menjadi file baru yang sama seperti file yang aslinya.

Misalnya pada pengiriman file dengan ukuran 256 MByte, file tersebut harus dipecah terlebih dahulu pada sisi client via javascript menjadi 1 Mbyte sebanyak 256 buah file. Pecahan file tersebut kemudian dikirim satu persatu menuju server. Kemudian saat semua file sudah berada di server, proses penggabungan file (merger) segera dilakukan.

flowchart upload large file

Membuat File .htaccess

File .htaccess merupakan file yang digunakan untuk melakukan berbagai konfigurasi terhadap web server. File ini berbentuk teks murni (plain text).

Agar proses pengiriman file ke server dapat berjalan baik, diperlukan beberapa pengaturan seperti pengaturan waktu batas eksekusi "max_execution_time" yang ditetapkan 300 atau 300 detik (5 menit). Kemudian pengaturan batas ukuran file "upload_max_filesize" ditetapkan 800M atau 800 MByte.

Berikut isi file .htaccess :

KODE SCRIPT

1
2
3
4
php_value upload_max_filesize 800M
php_value post_max_size 800M
php_value max_input_time 300
php_value max_execution_time 300

Membuat Halaman Index

Halaman index berisi formulir dengan input data berupa file. Agar proses upload file dapat berjalan baik, diperlukan dua buah elemen HTML <button> dengan type "button". Elemen button yang pertama digunakan untuk melakukan upload file chunk ke server. Kemudian elemen button yang kedua untuk melakukan proses penggabungan file chunk pada server (Merger file). Proses pengiriman file dan merger file dilakukan secara background dengan perantara AJAX.

Berikut halaman index.php :

PHP

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<!DOCTYPE html>
<html>
<head>
<title>Upload Large File With Chunks</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link href="libs/css/bootstrap_min.css" rel="stylesheet">
</head>
<body>
<h1>Upload Large File With Chunks</h1>
<form method="">
   <p>Please select a file</p>
   <div class="file_container">
   <p><input type="file" id="file" class="file"></p>
   <p>
   <button type="button" class="btn btn-primary" id="btn_upload" disabled><span class="glyphicon glyphicon-arrow-up"></span> Upload Large File</button>
   <button type="button" class="btn btn-primary" id="btn_merge_file" disabled><span class="glyphicon glyphicon-compressed"></span> Merge Now</button>
   </p>
   </div>
   <div id="message_info"></div>
</form>
<script>
var success;
$(document).ready(function(){
   $('#file').change(function(){
     collectDataChunk();
   });
   $('#btn_upload').click(function(){
     var file_val = $('.file').val();
     if(file_val == ""){
        alert("Please select a file");
        return false;
     }else{
        ajax_file_upload(file_obj, 0);
     }
   });
   $('#btn_merge_file').click(function(){
     mergeFile(file_obj);
   });
});
var file_obj;
const BYTES_PER_CHUNK = 1024 * 1024;
var slices;
var totalSlices;
var ajax;
var formdata;
var chunk;
var data_chunk = [];
function collectDataChunk() {
   file_obj = document.getElementById('file').files[0];
   if(!file_obj){
     alert("Select a file please..");
   }else{
     var start = 0;
     var end;
     var index = 0;
     slices = Math.ceil(file_obj.size / BYTES_PER_CHUNK);
     totalSlices= slices;
     while(start < file_obj.size) {
     end = start + BYTES_PER_CHUNK;
        if(end > file_obj.size) {
          end = file_obj.size;
        }
        /*collecting chunk's data and store it */
        data_chunk[index] = start + "|" + end;
        console.log("start : "+start+", end : "+end +", total slices : "+ totalSlices+", slices : "+ slices);
        start = end;
        index++;
        slices--;
     }
     $('#btn_upload').removeAttr("disabled");
   }
}
function ajax_file_upload(file_obj, f) {
   if(file_obj != undefined) {
     var text = data_chunk[f].split("|");
     var start_ = text[0];
     var end_ = text[1];
     chunk =file_obj.slice(start_, end_);
     var formdata = new FormData();
     formdata.append("file", chunk);
     formdata.append("name", file_obj.name);
     formdata.append("index", f);
     $.ajax({
        type: 'POST',
        url: 'upload.php',
        contentType: false,
        processData: false,
        data: formdata,
        beforeSend:function(response) {
          $('#message_info').html("Uploading your file, please wait...");
        },
        success:function(response) {
          console.log("response" + response);
          if(response == 1){
             if(f<data_chunk.length-1){
               sleep(300);/* give 0.3 sec to avoid error server getting busy..*/
               ajax_file_upload(file_obj , f+1);
               $('#message_info').html("Uploading your file " + f+ ", please wait...");
             }else{
               $('#message_info').html("Your file has uploaded successfully..<br>Please hits <b>Merge Now button</b> to merge your file");
               $('#btn_merge_file').removeAttr("disabled");
             }
          }else if(response == 0){
          $('#message_info').html("Failed to upload file..").css("color","red");
          }
        },
        error:function(xhr, textStatus, error) {
          if(textStatus == "error"){
          $('#message_info').html("Error, Something happen..").css("color","red");
        }
        }
     });
   }
}
function mergeFile(file_obj) {
   var formdata = new FormData();
   formdata.append("name", file_obj.name);
   formdata.append("index", totalSlices);
   $.ajax({
     type: 'POST',
     url: 'merge.php',
     contentType: false,
     processData: false,
     data: formdata,
     beforeSend:function(response) {
        $('#message_info').html("Merging your file, please wait...");
     },
     success:function(response) {
        console.log("response" + response);
        if(response == 1){
          $('#message_info').html("Your file has merged successfully.");
        }else if(response == 0){
        /* do nothing */
        }
     },
     error:function(xhr, textStatus, error) {
     if(textStatus == "error"){
        /* do nothing */
     }
     }
   });
}
function sleep(milliseconds){
   const date = Date.now();
   let currentDate = null;
   do{
   currentDate = Date.now();
   }while(currentDate - date < milliseconds);
}
</script>
</body>
</html>

Penataan elemen HTML-nya menggunakan style.css :

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
body{ 
   padding: 20px;
}
form{
   padding: 40px 20px;
   background: #FFA0A0;
   border-radius: 10px;
}
form p{
   font-size:18px;
}
.loading{
   position:absolute;
   display:inline-block;
   width:16px;
   top:1px;
   left:4%;
}

Penjelasan :
Pada index.php-nya, Elemen HTML tag <form> digunakan sebagai wadah bagi elemen <input> type file serta elemen <button> untuk mengirimkan file. Karena pengiriman file dengan melalui AJAX, maka atribut form "action" dan "enctype" tidak diperlukan begitu juga button dengan jenis submit.

Terdapat dua buah elemen HTML tag button. Button dengan id "btn_upload" digunakan untuk melakukan proses upload file ke server. Button dengan id "btn_merge_file" digunakan untuk melakukan proses merger atau penggabungan file pada server (baris ke-16 s.d 17).

Pada Javascript-nya, sebelum pengiriman data file menuju server hal yang perlu dilakukan adalah menyimpan informasi track data file dikirim melalui fungsi "collectDataChunk()". Informasi ini nantinya digunakan pada proses pengiriman file saat pengguna menekan tombol Upload Large File ke server.

Pada proses pengiriman file, data yang akan dikirim dimuat dalam bentuk formdata(). Data dengan nama "file" merupakan data berisi file yang sudah dipecah dalam bentuk chunk file. Kemudian data "index" berisi nomor index dari file yang sudah dipecah tersebut. Jika pengiriman berhasil, maka sistem akan melakukan looping dengan mengirimkan file berikutnya sampai file pecahan terakhir berhasil dikirimkan. Untuk menghindari respon server dalam bentuk Server busy, koneksi ke server perlu diputus oleh javascript client, kemudian dilanjutkan dengan mengirimkan file yang selanjutnya "sleep(300)" atau 0.3 detik.

Membuat Halaman Upload

Halaman upload file digunakan sebagai tempat untuk melakukan proses pengiriman file. File akan disimpan pada folder dengan nama "uploads". File nantinya akan diberi nama sesuai dengan nama file asli dengan diikuti nomor index file tersebut. Hal ini dimaksudkan untuk mempermudah dalam proses penggabungan file setelah semua file berhasil diupload.

Parameter keberhasilan success dikirimkan dalam bentuk angka 1 atau nilai true. Jika gagal parameter yang dikirimkan berupa angka 0 atau false. Berikut halaman upload.php :

PHP

1
2
3
4
5
6
7
8
9
10
11
12
<?php
$folder="uploads/";
if(!is_dir($folder)){
   mkdir($folder);
}
$randname=$_POST["name"]. '-' . $_POST['index'];
if(move_uploaded_file($_FILES["file"]["tmp_name"], $folder.$randname)){
   echo "1";
}else{
   echo "0";
}
?>

Membuat Halaman Merge File

Halaman merge file digunakan sebagai tempat untuk melakukan proses penggabungan file yang sudah berada pada server. Penggabungan data file dilakukan dengan menyalin isi file per BITWISE dan menyimpan ulang ke dalam file yang baru.

Berikut halaman merge.php :

PHP

1
2
3
4
5
6
7
8
9
10
11
12
13
<?php
$target = "uploads/".$_POST["name"];
$dst = fopen($target, 'wb');
for($i = 0; $i < $_POST['index']; $i++) {
   $slice = $target . '-' . $i;
   $src = fopen($slice, 'rb');
   stream_copy_to_stream($src, $dst);
   fclose($src);
   unlink($slice);
}
fclose($dst);
echo "1";
?>

Hasil Output

Saat halaman index pertama kali diload akan menghasilkan :

upload large file chunks

Saat proses uploading file sedang berlangsung :

upload large file chunks

Saat proses uploading file selesai dikerjakan :

upload large file chunks

Tampilan file yang berhasil di pecah (chunk's file) pada file exprorer :

chunks file on file explorer

Tampilan file normal, saat chunk's file sudah dimerger ulang pada file exprorer :

chunks file on file explorer

Berikut tampilan video proses uploading file berukuran besar, proses pemecahan file hingga merger file pada server :

Source Code

Silahkan download source code beserta file pendukung pada tutorial ini.

Demikian artikel bagaimana cara melakukan upload file berukuran besar dengan tekhnik chunk file, semoga bermanfaat .

   0   1.680

Kategori : tag iconhtml - tag iconjavascript - tag iconjquery - tag iconphp - tag iconajax - tag iconupload

facebooktwitterwhatapplinkedinpinterest

previous Previous Page

Tinggalkan Balasan

Nama Pengguna* :

Email* :

 

Mengirim Komentar

Setiap pengunjung situs ini dapat memposting komentar disini, namun tidak semua komentar dapat ditampilkan. Gunakan kalimat baku bahasa Indonesia yang mudah dimengerti. Dilarang memposting kalimat yang berisi ujaran kebencian, SARA, pornografi, perjudian dan spam. Komentar harus sesuai dengan topik. Untuk bahasan lainnya yang lebih mendalam dapat menggunakan sarana forum. Anda dapat mengirimkan suatu pertanyaan dan member lainnya akan menjawab pertanyaan Anda.
close

News Letters

Silahkan masukkan email Anda untuk berlangganan informasi kami

Polling

1. Apakah website ini menambah pengetahuan Anda?
 Ya
 Tidak
 Tidak Tahu
2. Seberapa sering Anda mengunjungi website ini?
 Sering
 Jarang
 Tidak Pernah
3. Apakah penilaian Anda terhadap website ini, jika melihat dari segi konten/isi?
 Sangat Bagus
 Bagus
 Cukup Bagus
 Kurang Bagus
4. Apakah penilaian Anda terhadap website ini, jika melihat dari segi tampilan?
 Sangat Bagus
 Bagus
 Cukup Bagus
 Kurang Bagus
5. Untuk meningkatkan kualitas website ini, Apakah saran Anda?

 


Visitor Live Chat

Silahkan anda memberikan masukkan chat (obrolan) pada fasilitas chat ini. Konten bebas, sopan dan menghargai pendapat orang lain..

 _Dicky (06 Mar 2021 at 03:24 pm)

Said : Oops, It's nice content

 rizky yuda (07 Mar 2021 at 12:30 pm)

Said : Konten cukup menambah wawasan...

 suryadi (13 Mar 2021 at 06:46 pm)

Said : Boleh request artikel cara koneksi database msyql ke php..

 Nettie Rutherfo (08 Apr 2021 at 12:30 pm)

Said : Auto

 Tedy (29 Mei 2021 at 12:09 pm)

Said : nice blog and articles..

 Ms. Doyle Mann (02 Jun 2021 at 09:56 pm)

Said : card

 flowrie_skylee (12 Jun 2021 at 01:24 pm)

Said : nice content

 Nelson Schaefer (12 Jul 2021 at 04:01 pm)

Said : JSON

 ooppp (18 Jul 2021 at 11:44 pm)

Said : 000popooppi

 Mrs. Jeff Boehm (01 Agt 2021 at 11:01 am)

Said : fuchsia

 dharma (07 Sept 2021 at 05:16 pm)

Said : ini support PHP 8?

 admin (12 Sept 2021 at 12:50 pm)

Said : #dharma masih dalam ruang lingkup PHP versi 7.
Namun untuk ke depannya akan dipertimbangkan agar support PHP 8, jika perubahan dari PHP 7 ke PHP 8 memang dirasa sangat signifikan.

 sadas (13 Jan 2022 at 09:48 am)

Said : Hello

 sutiyono (15 Jan 2022 at 09:36 am)

Said : konten cukup menarik.

 Fuad (08 Mar 2022 at 05:00 pm)

Said : Maksih bang kontennya, sangat membantu.

 admin (10 Mar 2022 at 12:18 pm)

Said : #Fuad Sama sama bang.. terima kasih sudah mampir di blog ini..

 Ferdian (09 Mei 2022 at 11:31 pm)

Said : bang bisa tolong buatkan contoh tamplate kirim email verifikasi gak?

 admin (10 Mei 2022 at 09:44 pm)

Said : Bang #Ferdian, artikelnya belum dibuat. Tapi ada kesamaan konsep yang dapat ditemukan pada halaman : Membuat Form Newsletters Interaktif Dengan Kode Verifikasi Dikirim Via Email,
Silahkan download source code dan file penunjangnya di sana. dan coba kembangkan untuk mengirimkan verifikasi via email untuk penggunaan yang lainnya.

 Abror (11 Jun 2022 at 09:08 am)

Said : Hallo min mau tanya kenapa script yang di konten teknik grabbing tidak bisa dibuka di laptop saya?

 admin (12 Jun 2022 at 12:11 am)

Said : #Abror stuck-nya dibagian mana bang? kalau localhost bisa aktifkan curl pada file php.ini dengan cara menghilangkan semicolon pada ;extension=php_curl.dll. Jika hosting online, dapat langsung dijalankan. cUrl dapat mengambil konten dan menampilkannya secara langsung pada halaman web.

 admin (12 Jun 2022 at 10:29 am)

Said : #Abror Silahkan akses artikel Menyalin konten suatu website teknik grabbing dengan native PHP, jika mengalami kesulitan dengan aktivasi cURL.. Terima kasih.

 SYAHRUL (23 Jun 2022 at 09:40 pm)

Said : oknull

 bang (26 Jun 2022 at 07:55 pm)

Said : bang caranya biar upload file dengan ekstensi tertentu di php gimana bang?

 admin (02 Jul 2022 at 11:34 am)

Said : #bang ??# Silahkan akses halaman Membatasi Upload File Dengan Format Tertentu Melalui Atribut HTML, Javascript Dan PHP. Pembatasan dapat dilakukan via HTML dengan menambahkan atribut accept, via javascipt dan juga via PHP script di sisi server.. have a nice day 😍😍 🤩..

 modas (04 Jul 2022 at 03:47 pm)

Said : halo

 Geoww (15 Agt 2022 at 11:45 pm)

Said : Tolong buat tutorial auto insert mysql, saat discaner kak, dan ditampilkan total yg m***k ke databasenya.

 Dita Sihombing (13 Sept 2022 at 02:12 pm)

Said : Dalam implementasi Digital Signature pada sistem untuk dapat signing and verify gimana caranya kak, tolong buat tutorial nya dong kak

Visitor Name
Email

 I'm not a robot