How to Build an FTP File Upload Progress Bar with PHP and jQuery
This guide explains how to create a real‑time FTP file upload progress bar using a PHP backend and jQuery on the front end, covering the underlying concept, step‑by‑step implementation, code examples, and important considerations for reliable large‑file uploads.
Background
In web development, uploading files is a common feature, and for large files it is essential to show users a progress bar so they can see the upload status. This article demonstrates how to implement an FTP file‑upload progress bar using PHP on the server side and jQuery on the client side.
Implementation Method
The basic idea is to calculate the ratio of the uploaded size to the total file size and display that ratio on the front‑end as a progress bar. The implementation steps are:
Create an upload page that contains a file‑selection form and a progress‑bar container.
In PHP, receive the uploaded file and transfer it to an FTP server via an FTP connection.
During the transfer, track the amount of data already sent and compute the progress percentage.
Send the progress information to the front end using AJAX (or another asynchronous method) and update the progress bar in real time.
Code Examples
Front‑end page (upload.html)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>FTP文件上传进度条</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("form").submit(function(event) {
event.preventDefault();
var formData = new FormData($(this)[0]);
$.ajax({
url: 'upload.php',
type: 'POST',
data: formData,
processData: false,
contentType: false,
xhr: function() {
var xhr = new window.XMLHttpRequest();
xhr.upload.addEventListener("progress", function(evt) {
if (evt.lengthComputable) {
var percentComplete = evt.loaded / evt.total;
$("#progress-bar").width(Math.round(percentComplete * 100) + '%');
}
}, false);
return xhr;
},
success: function() {
alert('文件上传成功！');
}
});
});
});
</script>
<style>
#progress-bar {
width: 0%;
height: 20px;
background-color: #1E90FF;
}
</style>
</head>
<body>
<form action="upload.php" method="post" enctype="multipart/form-data">
<input type="file" name="file">
<input type="submit" value="上传">
</form>
<div id="progress-bar"></div>
</body>
</html>Back‑end PHP script (upload.php)
<?php
$ftp_server = "Your_FTP_Server";
$ftp_user = "Your_FTP_Username";
$ftp_password = "Your_FTP_Password";
$remote_file_path = "/upload/";
if ($_FILES["file"]["error"] > 0) {
echo "文件上传失败！";
} else {
$file_name = $_FILES["file"]["name"];
$file_tmp = $_FILES["file"]["tmp_name"];
$file_size = $_FILES["file"]["size"];
$ftp_conn = ftp_connect($ftp_server);
ftp_login($ftp_conn, $ftp_user, $ftp_password);
ftp_pasv($ftp_conn, true);
$remote_file = $remote_file_path . $file_name;
if (ftp_put($ftp_conn, $remote_file, $file_tmp, FTP_BINARY)) {
echo "文件上传成功！";
} else {
echo "文件上传失败！";
}
ftp_close($ftp_conn);
}
?>The front‑end uses jQuery to handle the AJAX request and listens to the progress event on the XMLHttpRequest object to update the width of the #progress-bar element. The back‑end PHP script receives the uploaded file, connects to the FTP server, and transfers the file using ftp_put.
Notes
Before using FTP, ensure that the server address, username, and password are correct. The progress‑bar style can be customized to match project requirements. In production, you should add error handling for failed uploads and provide user‑friendly messages.
Conclusion
By following the steps above, you can implement an FTP file‑upload progress bar with PHP, giving users clear feedback during large file uploads and improving overall user experience.
php Courses
php中文网's platform for the latest courses and technical articles, helping PHP learners advance quickly.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.