Update php_upload/upload.php
This commit is contained in:
+51
-6
@@ -4,8 +4,11 @@
|
||||
<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">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container mt-5">
|
||||
<h2>Upload a Large File</h2>
|
||||
|
||||
<?php
|
||||
@@ -21,12 +24,20 @@
|
||||
<p><strong>Maximum Execution Time:</strong> <?php echo $max_execution_time; ?> seconds</p>
|
||||
<p><strong>Memory Limit:</strong> <?php echo $memory_limit; ?></p>
|
||||
|
||||
<form action="test_upload.php" method="post" enctype="multipart/form-data">
|
||||
Select file to upload:
|
||||
<input type="file" name="fileToUpload" id="fileToUpload">
|
||||
<input type="submit" value="Upload File" name="submit">
|
||||
<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">
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary" name="submit">Upload File</button>
|
||||
</form>
|
||||
|
||||
<div class="progress mt-3">
|
||||
<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>
|
||||
|
||||
<?php
|
||||
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
|
||||
$target_dir = "uploads/";
|
||||
@@ -39,11 +50,45 @@
|
||||
|
||||
// Move uploaded file to the target directory
|
||||
if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file)) {
|
||||
echo "The file ". basename($_FILES["fileToUpload"]["name"]). " has been uploaded.";
|
||||
echo "<script>document.getElementById('uploadStatus').innerHTML = 'The file " . basename($_FILES["fileToUpload"]["name"]) . " has been uploaded.';</script>";
|
||||
} else {
|
||||
echo "Sorry, there was an error uploading your file.";
|
||||
echo "<script>document.getElementById('uploadStatus').innerHTML = 'Sorry, there was an error uploading your file.';</script>";
|
||||
}
|
||||
}
|
||||
?>
|
||||
</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>
|
||||
<script>
|
||||
$(document).ready(function(){
|
||||
$('#uploadForm').on('submit', function(e){
|
||||
e.preventDefault();
|
||||
var formData = new FormData(this);
|
||||
$.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').attr('aria-valuenow', percentComplete);
|
||||
}
|
||||
}, false);
|
||||
return xhr;
|
||||
},
|
||||
type: 'POST',
|
||||
url: '<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>',
|
||||
data: formData,
|
||||
contentType: false,
|
||||
processData: false,
|
||||
success: function(response) {
|
||||
$('#uploadStatus').html(response);
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user