Update php_upload/upload.php
This commit is contained in:
+214
-38
@@ -3,77 +3,239 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Test Upload</title>
|
||||
<!-- Bootstrap CSS -->
|
||||
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
|
||||
<title>Advanced File Upload</title>
|
||||
<!-- Bootstrap 5 CSS -->
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<!-- Google Fonts -->
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">
|
||||
<!-- Font Awesome for Icons -->
|
||||
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
|
||||
<style>
|
||||
/* Global Styles */
|
||||
body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
background-color: #f0f2f5;
|
||||
transition: background-color 0.3s ease, color 0.3s ease;
|
||||
}
|
||||
.container {
|
||||
max-width: 600px;
|
||||
background-color: #ffffff;
|
||||
padding: 40px;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
transition: background-color 0.3s ease, color 0.3s ease;
|
||||
}
|
||||
h2 {
|
||||
margin-bottom: 30px;
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
}
|
||||
/* Dark Mode Styles */
|
||||
body.dark-mode {
|
||||
background-color: #121212;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
body.dark-mode .container {
|
||||
background-color: #1e1e1e;
|
||||
color: #e0e0e0;
|
||||
box-shadow: 0 4px 6px rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
/* Toggle Switch */
|
||||
.theme-switch {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
}
|
||||
/* Progress Bar Styles */
|
||||
.progress {
|
||||
height: 20px;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
background-color: #e9ecef;
|
||||
}
|
||||
.progress-bar {
|
||||
transition: width 0.4s ease, background-color 0.3s ease;
|
||||
background: linear-gradient(90deg, #4facfe, #00f2fe);
|
||||
}
|
||||
/* Upload Speed Display */
|
||||
#uploadSpeed {
|
||||
margin-top: 15px;
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
/* Upload Status */
|
||||
#uploadStatus {
|
||||
margin-top: 20px;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
}
|
||||
/* Button Styles */
|
||||
.btn-primary {
|
||||
background-color: #4facfe;
|
||||
border: none;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
.btn-primary:hover {
|
||||
background-color: #00f2fe;
|
||||
}
|
||||
/* Dark Mode Button */
|
||||
body.dark-mode .btn-primary {
|
||||
background-color: #00bcd4;
|
||||
}
|
||||
body.dark-mode .btn-primary:hover {
|
||||
background-color: #0097a7;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Theme Toggle Switch -->
|
||||
<div class="theme-switch">
|
||||
<button id="toggleTheme" class="btn btn-secondary btn-sm">
|
||||
<i class="fas fa-moon"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="container mt-5">
|
||||
<h2>Upload a Large File</h2>
|
||||
<h2>Advanced File Upload</h2>
|
||||
|
||||
<?php
|
||||
// Get configuration limits
|
||||
// Handle the file upload if it's an AJAX request
|
||||
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
|
||||
// Ensure the 'uploads' directory exists
|
||||
$target_dir = "uploads/";
|
||||
if (!is_dir($target_dir)) {
|
||||
mkdir($target_dir, 0755, true);
|
||||
}
|
||||
|
||||
// Check if a file was uploaded without errors
|
||||
if (isset($_FILES["fileToUpload"]) && $_FILES["fileToUpload"]["error"] == 0) {
|
||||
$original_filename = basename($_FILES["fileToUpload"]["name"]);
|
||||
$file_extension = pathinfo($original_filename, PATHINFO_EXTENSION);
|
||||
$filename_without_ext = pathinfo($original_filename, PATHINFO_FILENAME);
|
||||
|
||||
// Generate a random keyword (10 characters)
|
||||
$random_keyword = bin2hex(random_bytes(5));
|
||||
|
||||
// Create the new filename
|
||||
$new_filename = $random_keyword . '_' . $filename_without_ext . '.' . $file_extension;
|
||||
$target_file = $target_dir . $new_filename;
|
||||
|
||||
// Move the uploaded file to the target directory with the new name
|
||||
if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file)) {
|
||||
// Get the current site URL
|
||||
$protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off' || $_SERVER['SERVER_PORT'] == 443) ? "https://" : "http://";
|
||||
$current_url = $protocol . $_SERVER['HTTP_HOST'] . dirname($_SERVER['PHP_SELF']);
|
||||
$file_url = $current_url . '/' . $target_file;
|
||||
|
||||
// Return the success message with the file link
|
||||
echo '<div class="alert alert-success" role="alert">
|
||||
<i class="fas fa-check-circle me-2"></i>The file has been uploaded successfully.
|
||||
<a href="' . htmlspecialchars($file_url) . '" target="_blank">View File</a>
|
||||
</div>';
|
||||
} else {
|
||||
// Return the error message
|
||||
echo '<div class="alert alert-danger" role="alert">
|
||||
<i class="fas fa-exclamation-triangle me-2"></i>Sorry, there was an error uploading your file.
|
||||
</div>';
|
||||
}
|
||||
} else {
|
||||
// Handle upload errors
|
||||
echo '<div class="alert alert-danger" role="alert">
|
||||
<i class="fas fa-exclamation-triangle me-2"></i> No file uploaded or there was an upload error.
|
||||
</div>';
|
||||
}
|
||||
// Terminate the script to prevent the rest of the page from rendering during AJAX
|
||||
exit;
|
||||
}
|
||||
?>
|
||||
|
||||
<?php
|
||||
// Display configuration limits
|
||||
$upload_max_filesize = ini_get('upload_max_filesize');
|
||||
$post_max_size = ini_get('post_max_size');
|
||||
$max_execution_time = ini_get('max_execution_time');
|
||||
$memory_limit = ini_get('memory_limit');
|
||||
?>
|
||||
|
||||
<p><strong>Maximum Upload Size:</strong> <?php echo $upload_max_filesize; ?></p>
|
||||
<p><strong>Maximum POST Size:</strong> <?php echo $post_max_size; ?></p>
|
||||
<p><strong>Maximum Execution Time:</strong> <?php echo $max_execution_time; ?> seconds</p>
|
||||
<p><strong>Memory Limit:</strong> <?php echo $memory_limit; ?></p>
|
||||
<ul class="list-group mb-4">
|
||||
<li class="list-group-item"><strong>Maximum Upload Size:</strong> <?php echo htmlspecialchars($upload_max_filesize); ?></li>
|
||||
<li class="list-group-item"><strong>Maximum POST Size:</strong> <?php echo htmlspecialchars($post_max_size); ?></li>
|
||||
<li class="list-group-item"><strong>Maximum Execution Time:</strong> <?php echo htmlspecialchars($max_execution_time); ?> seconds</li>
|
||||
<li class="list-group-item"><strong>Memory Limit:</strong> <?php echo htmlspecialchars($memory_limit); ?></li>
|
||||
</ul>
|
||||
|
||||
<form id="uploadForm" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post" enctype="multipart/form-data">
|
||||
<div class="form-group">
|
||||
<label for="fileToUpload">Select file to upload:</label>
|
||||
<input type="file" class="form-control" name="fileToUpload" id="fileToUpload">
|
||||
<form id="uploadForm" method="post" enctype="multipart/form-data">
|
||||
<div class="mb-3">
|
||||
<label for="fileToUpload" class="form-label">Select File to Upload:</label>
|
||||
<input type="file" class="form-control" name="fileToUpload" id="fileToUpload" required>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary" name="submit">Upload File</button>
|
||||
<button type="submit" class="btn btn-primary w-100" name="submit">
|
||||
<i class="fas fa-upload me-2"></i> Upload File
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div class="progress mt-3">
|
||||
<div class="progress mt-4">
|
||||
<div class="progress-bar" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
|
||||
<div id="uploadStatus" class="mt-3"></div>
|
||||
<!-- Display upload speed -->
|
||||
<div id="uploadSpeed" class="mt-3">
|
||||
<i class="fas fa-tachometer-alt"></i> Upload Speed: 0 B/s
|
||||
</div>
|
||||
|
||||
<?php
|
||||
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
|
||||
$target_dir = "uploads/";
|
||||
$target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);
|
||||
|
||||
// Check if directory exists, if not create it
|
||||
if (!is_dir($target_dir)) {
|
||||
mkdir($target_dir, 0755, true);
|
||||
}
|
||||
|
||||
// Move uploaded file to the target directory
|
||||
if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file)) {
|
||||
echo "<script>document.getElementById('uploadStatus').innerHTML = 'The file " . basename($_FILES["fileToUpload"]["name"]) . " has been uploaded.';</script>";
|
||||
} else {
|
||||
echo "<script>document.getElementById('uploadStatus').innerHTML = 'Sorry, there was an error uploading your file.';</script>";
|
||||
}
|
||||
}
|
||||
?>
|
||||
<div id="uploadStatus" class="mt-4"></div>
|
||||
</div>
|
||||
|
||||
<!-- jQuery and Bootstrap JS -->
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
|
||||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
|
||||
<!-- jQuery, Bootstrap JS, and Font Awesome -->
|
||||
<script src="https://code.jquery.com/jquery-3.6.0.min.js"</script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script>
|
||||
$(document).ready(function(){
|
||||
// Theme Toggle Functionality
|
||||
$('#toggleTheme').on('click', function(){
|
||||
$('body').toggleClass('dark-mode');
|
||||
// Toggle Icon
|
||||
if ($('body').hasClass('dark-mode')) {
|
||||
$(this).html('<i class="fas fa-sun"></i>');
|
||||
} else {
|
||||
$(this).html('<i class="fas fa-moon"></i>');
|
||||
}
|
||||
});
|
||||
|
||||
$('#uploadForm').on('submit', function(e){
|
||||
e.preventDefault();
|
||||
var formData = new FormData(this);
|
||||
var startTime = new Date().getTime(); // Start time
|
||||
|
||||
$.ajax({
|
||||
xhr: function() {
|
||||
var xhr = new window.XMLHttpRequest();
|
||||
xhr.upload.addEventListener("progress", function(evt) {
|
||||
if (evt.lengthComputable) {
|
||||
var percentComplete = Math.round((evt.loaded / evt.total) * 100);
|
||||
$('.progress-bar').width(percentComplete + '%');
|
||||
$('.progress-bar').css('width', percentComplete + '%');
|
||||
$('.progress-bar').attr('aria-valuenow', percentComplete);
|
||||
|
||||
// Calculate upload speed
|
||||
var currentTime = new Date().getTime();
|
||||
var timeElapsed = (currentTime - startTime) / 1000; // in seconds
|
||||
var bytesUploaded = evt.loaded;
|
||||
var speed = bytesUploaded / timeElapsed; // bytes per second
|
||||
|
||||
// Convert bytes to KB/s or MB/s
|
||||
var speedDisplay;
|
||||
if (speed < 1024) {
|
||||
speedDisplay = speed.toFixed(2) + ' B/s';
|
||||
} else if (speed < 1048576) {
|
||||
speedDisplay = (speed / 1024).toFixed(2) + ' KB/s';
|
||||
} else {
|
||||
speedDisplay = (speed / 1048576).toFixed(2) + ' MB/s';
|
||||
}
|
||||
|
||||
$('#uploadSpeed').html('<i class="fas fa-tachometer-alt"></i> Upload Speed: ' + speedDisplay);
|
||||
}
|
||||
}, false);
|
||||
return xhr;
|
||||
@@ -83,8 +245,22 @@
|
||||
data: formData,
|
||||
contentType: false,
|
||||
processData: false,
|
||||
beforeSend: function() {
|
||||
// Reset progress bar and status
|
||||
$('.progress-bar').css('width', '0%');
|
||||
$('.progress-bar').attr('aria-valuenow', 0);
|
||||
$('#uploadSpeed').html('<i class="fas fa-tachometer-alt"></i> Upload Speed: 0 B/s');
|
||||
$('#uploadStatus').html('');
|
||||
},
|
||||
success: function(response) {
|
||||
$('#uploadStatus').html(response);
|
||||
$('.progress-bar').css('width', '100%');
|
||||
$('.progress-bar').attr('aria-valuenow', 100);
|
||||
$('#uploadSpeed').html('<i class="fas fa-check-circle"></i> Upload completed.');
|
||||
},
|
||||
error: function() {
|
||||
$('#uploadStatus').html('<div class="alert alert-danger" role="alert"><i class="fas fa-exclamation-triangle me-2"></i>An error occurred during the upload.</div>');
|
||||
$('#uploadSpeed').html('<i class="fas fa-times-circle"></i> Upload failed.');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user