Update php_upload/upload.php
This commit is contained in:
+51
-6
@@ -4,8 +4,11 @@
|
|||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Test Upload</title>
|
<title>Test Upload</title>
|
||||||
|
<!-- Bootstrap CSS -->
|
||||||
|
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
<div class="container mt-5">
|
||||||
<h2>Upload a Large File</h2>
|
<h2>Upload a Large File</h2>
|
||||||
|
|
||||||
<?php
|
<?php
|
||||||
@@ -21,12 +24,20 @@
|
|||||||
<p><strong>Maximum Execution Time:</strong> <?php echo $max_execution_time; ?> seconds</p>
|
<p><strong>Maximum Execution Time:</strong> <?php echo $max_execution_time; ?> seconds</p>
|
||||||
<p><strong>Memory Limit:</strong> <?php echo $memory_limit; ?></p>
|
<p><strong>Memory Limit:</strong> <?php echo $memory_limit; ?></p>
|
||||||
|
|
||||||
<form action="test_upload.php" method="post" enctype="multipart/form-data">
|
<form id="uploadForm" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post" enctype="multipart/form-data">
|
||||||
Select file to upload:
|
<div class="form-group">
|
||||||
<input type="file" name="fileToUpload" id="fileToUpload">
|
<label for="fileToUpload">Select file to upload:</label>
|
||||||
<input type="submit" value="Upload File" name="submit">
|
<input type="file" class="form-control" name="fileToUpload" id="fileToUpload">
|
||||||
|
</div>
|
||||||
|
<button type="submit" class="btn btn-primary" name="submit">Upload File</button>
|
||||||
</form>
|
</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
|
<?php
|
||||||
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
|
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
|
||||||
$target_dir = "uploads/";
|
$target_dir = "uploads/";
|
||||||
@@ -39,11 +50,45 @@
|
|||||||
|
|
||||||
// Move uploaded file to the target directory
|
// Move uploaded file to the target directory
|
||||||
if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file)) {
|
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 {
|
} 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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
Reference in New Issue
Block a user