There are a few ways to deal with large file uploads in PHP. The easiest way is to increase the maximum upload size limit in the PHP configuration file (php.ini) on the server. If you don’t want to modify the server setting in PHP, the Chunk Upload<\/b> method is one of the best alternatives for large file upload with PHP. In chunk upload, the large file is split into small parts and uploaded in chunks. You can upload large files above 500MB or GB to the server using PHP. This tutorial will show you how to handle large file upload with the chunking feature in PHP.<\/p>\n
Normally, the entire file is posted to the server-side for upload. But, if the file is huge (about several gigabytes) in size, the standard upload may fail due to settings in the server’s constraints on uploaded file size. To overcome this issue, we can integrate the chunk upload functionality. The chunk file upload<\/b> method slices the file into chunks and sends them one by one to the server in PHP.<\/p>\n
We will use the Plupload library to split file into chunks on the client-side and post them to the server-side using JavaScript. Plupload is a JavaScript library that handles the chunk upload process on the client-side.<\/p>\n
Define HTML elements to select the file, upload button, and file queue.<\/p>\n
<!-- File browse input field --><\/span>\r\n<div<\/span> class<\/span>=\"form-group\"<\/span>><\/span>\r\n <label<\/span>><\/span><b<\/span>><\/span>Select File:<\/b<\/span>><\/span><\/label<\/span>><\/span>\r\n <input<\/span> type<\/span>=\"file\"<\/span> class<\/span>=\"form-control\"<\/span> id<\/span>=\"fileInput\"<\/span>><\/span>\r\n<\/div<\/span>><\/span>\r\n\r\n<!-- List the selected files --><\/span>\r\n<div<\/span> id<\/span>=\"fileList\"<\/span>><\/span><\/div<\/span>><\/span>\r\n\r\n<!-- Upload button --><\/span>\r\n<div<\/span> class<\/span>=\"form-group\"<\/span>><\/span>\r\n <a<\/span> id<\/span>=\"uploadBtn\"<\/span> href<\/span>=\"javascript:;\"<\/span> class<\/span>=\"btn btn-success\"<\/span>><\/span>Upload<\/a<\/span>><\/span>\r\n<\/div<\/span>><\/span><\/pre>\nAdditionally, we have added a progress bar that indicates the upload progress in a percentage format.<\/p>\n
<!-- Progress bar --><\/span>\r\n<div<\/span> class<\/span>=\"progress\"<\/span>><\/span><\/div<\/span>><\/span><\/pre>\nInitialize Plupload Uploader with JavaScript<\/h2>\n
First, include the Plupload JS library.<\/p>\n
<script<\/span> src<\/span>=\"plupload\/js\/plupload.full.min.js\"<\/span>><\/span><\/span><\/script<\/span>><\/span><\/pre>\nDefine Plupload uploader with configuration options using JavaScript.<\/p>\n
\nbrowse_button<\/code>: Element ID of the file browse button.<\/li>\nurl<\/code>: The URL of the server-side script that handles the file upload process.<\/li>\nmulti_selection<\/code>: Set true if you want to allow select multiple files at once.<\/li>\nmax_file_size<\/code>: Maximum file size that is allowed to upload.<\/li>\nmime_types<\/code>: Type of the files that are allowed to upload.<\/li>\n<\/ul>\nInitialize Plupload uploader with init()<\/code> method.<\/p>\n<script<\/span>><\/span>\r\n\/\/ Define Plupload uploader with configuration options<\/span>\r\nvar<\/span> uploader = new<\/span> plupload.Uploader({\r\n runtimes : 'html5,flash,silverlight,html4'<\/span>,\r\n browse_button : 'fileInput'<\/span>, \/\/ you can pass an id...<\/span>\r\n url : 'upload.php'<\/span>,\r\n flash_swf_url : 'plupload\/js\/Moxie.swf'<\/span>,\r\n silverlight_xap_url : 'plupload\/js\/Moxie.xap'<\/span>,\r\n multi_selection: false<\/span>,\r\n\t\r\n filters : {\r\n max_file_size : '500mb'<\/span>,\r\n mime_types: [\r\n {title : \"Image files\"<\/span>, extensions : \"jpg,jpeg,gif,png\"<\/span>},\r\n {title : \"Video files\"<\/span>, extensions : \"mp4,avi,mpeg,mpg,mov,wmv\"<\/span>},\r\n {title : \"Zip files\"<\/span>, extensions : \"zip\"<\/span>},\r\n {title : \"Document files\"<\/span>, extensions : \"pdf,docx,xlsx\"<\/span>}\r\n ]\r\n },\r\n\r\n init: {\r\n PostInit: function<\/span>(<\/span>) <\/span>{\r\n document<\/span>.getElementById('fileList'<\/span>).innerHTML = ''<\/span>;\r\n\r\n document<\/span>.getElementById('uploadBtn'<\/span>).onclick = function<\/span>(<\/span>) <\/span>{\r\n if<\/span> (uploader.files.length < 1<\/span>) {\r\n document<\/span>.getElementById('statusResponse'<\/span>).innerHTML = '<p style=\"color:#EA4335;\">Please select a file to upload.<\/p>'<\/span>;\r\n return<\/span> false<\/span>;\r\n }else<\/span>{\r\n uploader.start();\r\n return<\/span> false<\/span>;\r\n }\r\n };\r\n },\r\n\r\n FilesAdded: function<\/span>(up, files<\/span>) <\/span>{\r\n plupload.each(files, function<\/span>(file<\/span>) <\/span>{\r\n document<\/span>.getElementById('fileList'<\/span>).innerHTML += '<div id=\"'<\/span> + file.id + '\">'<\/span> + file.name + ' ('<\/span> + plupload.formatSize(file.size) + ') <b><\/b><\/div>'<\/span>;\r\n });\r\n },\r\n\r\n UploadProgress: function<\/span>(up, file<\/span>) <\/span>{\r\n document<\/span>.getElementById(file.id).getElementsByTagName('b'<\/span>)[0<\/span>].innerHTML = '<span>'<\/span> + file.percent + \"%<\/span>\"<\/span>;\r\n document<\/span>.querySelector(\".progress\"<\/span>).innerHTML = '<div class=\"progress-bar\" style=\"width: '<\/span>+file.percent+'%;\">'<\/span>+file.percent+'%<\/div>'<\/span>;\r\n },\r\n \r\n FileUploaded: function<\/span>(up, file, result<\/span>) <\/span>{\r\n var<\/span> responseData = result.response.replace('\"{'<\/span>, '{'<\/span>).replace('}\"'<\/span>, '}'<\/span>);\r\n var<\/span> objResponse = JSON<\/span>.parse(responseData);\r\n document<\/span>.getElementById('statusResponse'<\/span>).innerHTML = '<p style=\"color:#198754;\">'<\/span> + objResponse.result.message + '<\/p>'<\/span>;\r\n },\r\n\r\n Error<\/span>: function<\/span>(up, err<\/span>) <\/span>{\r\n document<\/span>.getElementById('statusResponse'<\/span>).innerHTML = '<p style=\"color:#EA4335;\">Error #'<\/span> + err.code + ': '<\/span> + err.message + '<\/p>'<\/span>;\r\n }\r\n }\r\n});\r\n\r\n\/\/ Initialize Plupload uploader<\/span>\r\nuploader.init();<\/span>\r\n<\/script<\/span>><\/span><\/pre>\nServer-side Upload Handler with PHP<\/h2>\n
This script handles the file uploaded process with chunk functionality.<\/p>\n
\n- Get selected file data using the PHP $_FILES<\/b> method.<\/li>\n
- Check whether Chunking is requested and enabled.<\/li>\n
- Upload file in chunks to the server using PHP.<\/li>\n<\/ul>\n
In the $targetDir<\/code> variable, specify the folder name where the uploaded files will be stored.<\/p>\n<?php
<\/span>\/\/ Make sure file is not cached (as it happens for example on iOS devices)
<\/span>header<\/span>(<\/span>\"Expires: Mon, 26 Jul 1997 05:00:00 GMT\"<\/span>);
<\/span>header<\/span>(<\/span>\"Last-Modified: \" <\/span>. <\/span>gmdate<\/span>(<\/span>\"D, d M Y H:i:s\"<\/span>) . <\/span>\" GMT\"<\/span>);
<\/span>header<\/span>(<\/span>\"Cache-Control: no-store, no-cache, must-revalidate\"<\/span>);
<\/span>header<\/span>(<\/span>\"Cache-Control: post-check=0, pre-check=0\"<\/span>, <\/span>false<\/span>);
<\/span>header<\/span>(<\/span>\"Pragma: no-cache\"<\/span>);
<\/span>\/\/ Settings
<\/span>$targetDir <\/span>= <\/span>'uploads'<\/span>;
<\/span>$cleanupTargetDir <\/span>= <\/span>true<\/span>; <\/span>\/\/ Remove old files
<\/span>$maxFileAge <\/span>= <\/span>5 <\/span>* <\/span>3600<\/span>; <\/span>\/\/ Temp file age in seconds
\/\/ Create target dir
<\/span>if (!<\/span>file_exists<\/span>(<\/span>$targetDir<\/span>)) {
@<\/span>mkdir<\/span>(<\/span>$targetDir<\/span>);
}
<\/span>\/\/ Get a file name
<\/span>if (isset(<\/span>$_REQUEST<\/span>[<\/span>\"name\"<\/span>])) {
<\/span>$fileName <\/span>= <\/span>$_REQUEST<\/span>[<\/span>\"name\"<\/span>];
} elseif (!empty(<\/span>$_FILES<\/span>)) {
<\/span>$fileName <\/span>= <\/span>$_FILES<\/span>[<\/span>\"file\"<\/span>