Zip file creation is a better way to enable the user to download multiple files in one package. This may affect the page load time according to the number of files and their size.
Arises more problems when need to create multiple zip files on page load for download.
To avoid this type of problem you can either use only PHP or jQuery AJAX to create and download the zip file when it’s required.
In this tutorial, I am using jQuery AJAX.
Contents
1. HTML
Creating a single button for download.
Completed Code
<body> <input type='button' id='download' value='Download'> </body>
2. PHP
Create a new ajaxfile.php file.
Also, create 2 directories –
- includes – In this directory store some files that need to be compressed.
- archive – This directory is used to store the created zip files.
Create a ZipArchive class object.
Specify zip file location in $filename variable.
Read files of includes directory and add in $zip object using addFile().
Return the path of zip file – $filename.
Completed Code
<?php
$zip = new ZipArchive();
$filename = "archive/myzipfile.zip";
if ($zip->open($filename, ZipArchive::CREATE)!==TRUE) {
exit("cannot open <$filename>\n");
}
$dir = 'includes/';
// Create zip
if (is_dir($dir)){
if ($dh = opendir($dir)){
while (($file = readdir($dh)) !== false){
// If file
if (is_file($dir.$file)) {
if($file != '' && $file != '.' && $file != '..'){
$zip->addFile($dir.$file);
}
}
}
closedir($dh);
}
}
$zip->close();
echo $filename;
3. jQuery
Send an AJAX request on download button click to create the zip file and get the file path.
On successful callback pass response in window.location to open link in new tab for download.
Completed Code
$(document).ready(function(){
$('#download').click(function(){
$.ajax({
url: 'ajaxfile.php',
type: 'post',
success: function(response){
window.location = response;
}
});
});
});
4. Demo
Click on the download button.
5. Conclusion
Prefer this type of file creation and download when there is a long list of records with download option.
Otherwise, simply use PHP to create zip file while data loading on the page.
If you found this tutorial helpful then don't forget to share.
Thank you very much for your post, its very useful. One question: what if I want to put all my files in the root folder ?, because now I have into my zip file the same root folder that in my local machine, but I wanna put everything in the root, then should not be necessary to navigate into the zip to get the files.
Thanks !!
Hi Javier,
Yes, it is not required.
Hi, thanks for your reply, But In dont understand it, whats is not required ?. I wanna know how to do it, how to put the files in th root folder, avoiding the original structure of folders.
Great post. I used to be checking constantly this blog and I’m inspired!
Extremely useful info specially the ultimate part.
I was looking for this certain info for a very long time.
Thanks and best of luck.
how to solve the error Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at file:///