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.
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
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
Previous Page 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.
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";
}
?>
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";
?>
Saat halaman index pertama kali diload akan menghasilkan :
Saat proses uploading file sedang berlangsung :
Saat proses uploading file selesai dikerjakan :
Tampilan file yang berhasil di pecah (chunk's file) pada file exprorer :
-24640.png)
Tampilan file normal, saat chunk's file sudah dimerger ulang pada file exprorer :
Berikut tampilan video proses uploading file berukuran besar, proses pemecahan file hingga merger file pada server :
Source Code
Demikian artikel bagaimana cara melakukan upload file berukuran besar dengan tekhnik chunk file, semoga bermanfaat .
0 
3.711
Halaman Terkait
Belum terdaftar? silahkan Daftar disini.
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.Paling Banyak Dibaca
News Letters
Silahkan masukkan email Anda untuk berlangganan informasi kami
Polling
Belum terdaftar? silahkan Daftar disini.
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 masuk 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
Xssddddd (20 Okt 2022 at 04:20 pm)
Said : <script>alert(123)</script>
Xssddddd (20 Okt 2022 at 04:21 pm)
Said : <ScRiPt>aler("aa")</ScRiPt>
aaaa (09 Nov 2022 at 12:07 am)
Said : <script>alert(\'wow\')</script>
Opik (22 Nov 2022 at 04:50 pm)
Said : Maksih bang kontennya, sangat membantu
"dude" (06 Des 2022 at 02:51 pm)
Said : asdasd
Vendetta (14 Des 2022 at 03:56 pm)
Said : artikel yang cukup membantu. tks
kontolodon (28 Des 2022 at 11:03 am)
Said : sangat membantu, trims
admin (01 Jan 2023 at 08:24 am)
Said : #***odon Oke. Terimakasih masukannya. Semoga blog ini dapat berkembang kedepannya walaupun di tengah keterbatasan sumber daya dan waktu.
Yato (24 Jan 2023 at 08:12 am)
Said : Min, request tutorial buat template wordpress dong!
diky (02 Feb 2023 at 09:20 pm)
Said : mau tanya cara cegah teknik grabbing itu bagaimana?
Adhi (04 Feb 2023 at 04:30 pm)
Said : Bang,bisa dibantu bikin tutorial aplikasi stok opname?
1) inputan : kode, nama, posisi/nama rak, satuan,qty
2) stok opname : cuma ditampilkan 1 field buat scan barcode, setelah barcode barang di scan, data inputan tampil dan ada 1 field input fisik.
Charles (16 Feb 2023 at 02:40 am)
Said : Thank you so much
chad (16 Feb 2023 at 03:30 pm)
Said : can you help me
Haiii (12 Mar 2023 at 01:55 pm)
Said : Halo
anonym (12 Mar 2023 at 07:13 pm)
Said : artikelnya membantu banget bang, worth it buat yang penegn belajar coding buat pemula. thanks bang
Uda richard (01 Apr 2023 at 11:00 am)
Said : Bg kalo mau nambahin fitur ppob pake javascript kira2 bisa ga ya?
admin (24 Apr 2023 at 02:39 pm)
Said : #Uda richard Bisa banget bang. Penyedia jasa PPOB (payment point online bank) layanan API nya, biasanya lebih flexible dalam hal berintegrasi dengan berbagai platform dan juga bahasa program termasuk javascript. Misalnya midtrans dan xendit.
admin (24 Apr 2023 at 02:44 pm)
Said : #anonym Terimakasih banyak kak. Semoga admin lebih bersemangat dan termotivasi lagi 🤩🤩.
admin (24 Apr 2023 at 02:46 pm)
Said : #Adhi Cukup menarik bang. Di tunggu ya artikelnya..
sandy (11 Mei 2023 at 11:11 pm)
Said : Terima kasih banya, saya sudah gunakan code nya dan berhasil download video dengan php.
faris (14 Mei 2023 at 08:42 am)
Said : sumpah bang, gw ngucapin terima kasih banyak sama lu, karena akhirnya gw bisa bikin menu sliding karena web ini. Udah dari kemarin gw nyoba dari web lain tapi hasilnya nihil
G1d30n (14 Mei 2023 at 11:53 am)
Said : Makasih Banyak Admin, udh mau berbagi ilmu, saya udah dari kemarin pengen belajar tpi binggung, sekarang saya udh bisa belajar
hehee (11 Jun 2023 at 06:31 pm)
Said : ngetest aja min hehee
json (15 Jun 2023 at 02:49 pm)
Said : hanya test
momoku (17 Jun 2023 at 11:49 am)
Said : Ini tempat terbaik untuk belajar, makasih banyak min,
312312 (10 Jul 2023 at 09:45 pm)
Said : dasdasd
teguh (18 Jul 2023 at 01:21 pm)
Said : Ijin bertanya min, sy baru belajar program autodidak dari media online. sy tertarik dengan dunia programing. Pertanyaan saya bagaimana menyimpan foto dari camera dengan cepat dan ringan, walaupun signalnya rendah. sy sdh menggunakan convert base64
joe j (30 Jul 2023 at 10:21 am)
Said : kalo mau belajar ttg grabbing gmn min?
awie (03 Agt 2023 at 11:06 pm)
Said : terima kasih infonya. ijin copas javascrip nya.
salam www.zianizianfarm.com
HTML
Peringatan!
Apakah ingin menghapus komentar ini?