Unlock a seamless and user-friendly approach to file uploads with the power of AJAX. If you find yourself enabling the upload of larger files, consider enhancing the user experience by incorporating a progress bar.
This visual element keeps users informed in real-time about the ongoing upload process, ensuring a smoother and more engaging interaction.
In this tutorial, I’ll guide you through the implementation of jQuery AJAX file upload with PHP, accompanied by a visually appealing progress bar.
Table of Content
- HTML – Create Upload and Progressbar layout
- PHP – Upload file to server
- jQuery AJAX – Upload file and display progress bar
- Output
- Conclusion
1. HTML – Create Upload and Progressbar layout
For file upload, create a file element and a button. Additionally, create a container for displaying the file upload progress using the <div id="progress-container"> element.
Display file upload response in <div id="fileupload-response">.
<style type="text/css">
#progress-container{
display: none;
}
#progress-container .progressbar{
width: 350px;
color: #000 !important;
background-color: #f1f1f1 !important;
}
#progress-container .progressbar .progressbar-status{
width:0;
height:24px;
color: #fff!important;
text-align: center;
padding-top: 5px;
background-color: #4CAF50 !important;
}
</style>
<!-- File upload form -->
<div>
<input type="file" name="uploadfile" id="uploadfile" />
<input type="button" value="Upload File" id="btnuploadfile" />
</div>
<br>
<!-- File upload progress container -->
<div>
<div id="progress-container" >
<div class="progressbar">
<div class="progressbar-status" ></div>
</div>
</div>
<div id="fileupload-response"></div>
</div>
2. PHP – Upload file to server
To manage file uploads via AJAX requests, create the ajaxfile.php file.
- Verify if a file is selected for upload.
- Validate that the file size does not exceed 50MB; if it does, return an error response.
- Validate the file extension against the defined extensions (‘jpg’, ‘jpeg’, ‘png’, ‘pdf’, ‘docx’, ‘zip’) stored in the
$valid_extensionsarray. - If the extension exists in the
$valid_extensionsArray, proceed to upload the file to the'uploads/'folder. - Generate a JSON response to indicate the success or failure of the file upload, including cases of an invalid file extension.
- Return
$responseArray in JSON format.
NOTE :-
- Be sure to check the ‘post_max_size’ and ‘upload_max_size’ values in the ‘php.ini’ file. Update them if necessary.
- Additionally, review and update the file size validation if needed.
<?php
if (isset($_FILES['uploadfile'])) {
$targetDir = 'uploads/';
$targetFile = $targetDir . basename($_FILES['uploadfile']['name']);
// File size validation (50 MB)
$maxFileSize = 50 * 1024 * 1024; // 50 MB in bytes
if ($_FILES['uploadfile']['size'] > $maxFileSize) {
$response = array(
"status" => 0,
"message" => "File size exceeds the maximum limit of 50 MB."
);
echo json_encode($response);
exit;
}
// File extension
$file_extension = pathinfo($targetFile, PATHINFO_EXTENSION);
$file_extension = strtolower($file_extension);
$valid_extensions = array("jpg","jpeg","png","pdf","docx","zip");
$response = array();
// Check file extension
if(in_array($file_extension,$valid_extensions)){
// Upload file
if (move_uploaded_file($_FILES['uploadfile']['tmp_name'], $targetFile)) {
// File uploaded successfully
$response = array(
"status" => 1,
"message" => "File uploaded successfully."
);
} else {
// File upload failed
$response = array(
"status" => 0,
"message" => "Error uploading file."
);
}
}else{
// File upload failed
$response = array(
"status" => 0,
"message" => "Invalid file extension."
);
}
// Return response
echo json_encode($response);
exit;
}
exit;
3. jQuery AJAX – Upload file and display progress bar
- File Upload Trigger:
- Define the click event on the ‘Upload File’ button (
#btnuploadfile).
- Define the click event on the ‘Upload File’ button (
- File Preparation for pass with AJAX request:
- Utilizes the FormData object to handle file data.
- Checks if a file has been selected using the file input (
#uploadfile). - If a file is selected, appends it to the FormData object.
- Progress Bar Setup:
- Defines a progress bar element (
#progress-container .progressbar-status). - Set up an AJAX request to
ajaxfile.phpfor file upload. - Specifies the request type as POST, the data as the FormData object, and the dataType as JSON.
- Disables automatic processing of data (
processData: false) and sets content type to false (contentType: false).
- Defines a progress bar element (
- Upload Progress Visualization:
- Uses the
xhrfunction to customize the XMLHttpRequest object. - Updates the progress bar based on the percentage of the file uploaded.
- Uses the
- Display Progress Bar:
- Displays the progress bar (
#progress-container) during the file upload.
- Displays the progress bar (
- Server Response Handling:
- Display a response to the user if no file is selected, prompting them to choose a file.
- If the response contains a
statusproperty:- If the
statusis 0, resets, and hides the progress bar. - Displays the corresponding message in the
#fileupload-response.
- If the
- If the response lacks a
statusproperty, displays an'Invalid request'message in the#fileupload-response.
$(document).ready(function() {
// Upload button click
$('#btnuploadfile').click(function(){
// FormData object
let formData = new FormData();
// Read selected file
const files = $('#uploadfile')[0].files;
// Empty the response
$("#fileupload-response").html("");
// Check file selected or not
if(files.length > 0 ){
formData.append('uploadfile',files[0]);
let progressBar = $('#progress-container .progressbar-status');
// Show the progress bar
$('#progress-container').show();
// AJAX request
$.ajax({
url: 'ajaxfile.php',
type: 'POST',
data: formData,
dataType: 'json',
processData: false,
contentType: false,
xhr: function() {
const xhr = new XMLHttpRequest();
xhr.upload.addEventListener('progress', function(e) {
if (e.lengthComputable) {
let percent = Math.round((e.loaded / e.total) * 100);
progressBar.width(percent + '%');
progressBar.html(percent + '%');
}
}, false);
return xhr;
},
success: function(response) {
if(response.hasOwnProperty('status')){
if(response.status == 0){
// Hide and reset progress bar
hideAndResetProgressBar(progressBar);
}
// Display response
$('#fileupload-response').html(response.message);
}else{
// Hide and reset progress bar
hideAndResetProgressBar(progressBar);
// Display response
$('#fileupload-response').html("Invalid request");
}
},
error: function(error){
console.log(error);
// Hide and reset progress bar
hideAndResetProgressBar(progressBar);
// Display response
$('#fileupload-response').html("Error uploading file.");
}
});
}else{
// Display response
$('#fileupload-response').html("Please select a file.");
}
});
});
// Hide and reset progress bar
function hideAndResetProgressBar(progressBar){
$('#progress-container').hide();
progressBar.width("0%");
progressBar.html("0%");
}
4. Output
5. Conclusion
The addition of a progress bar with a file upload form ensures real-time feedback, especially beneficial for larger file uploads. With jQuery AJAX and PHP, your web applications are now optimized for efficient and visually enriched file handling.
Implement these insights to elevate your projects and deliver an enhanced user journey.
If you found this tutorial helpful then don't forget to share.