Implementing an FTP File Upload Progress Bar with PHP
This article explains how to create an FTP file upload progress bar in web applications using PHP on the backend and jQuery on the frontend, detailing the implementation steps, providing complete HTML/JavaScript and PHP code examples, and outlining key considerations for reliable file transfer.
Background
In website development, file upload is a common feature, and for large files it is important to show a progress bar so users can see the upload progress. This article introduces how to implement an FTP file upload progress bar using PHP.
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 concrete steps are: (1) create an upload page containing a file‑upload form and a progress‑bar container; (2) in PHP receive the file and upload it to an FTP server; (3) while receiving, track the uploaded size and compute the progress; (4) send the progress to the front‑end via AJAX (or similar) to update the bar in real time.
PHP Code Example
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 send the file via AJAX and updates the progress bar by listening to the xhr.upload progress event. The back‑end receives the file and uploads it to the FTP server using PHP's FTP functions.
Precautions
Before using FTP upload, ensure the server address, username, and password are correct. The progress‑bar style can be customized as needed. In production, 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, improving user experience for large file uploads by showing real‑time progress.
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.