我在php中创建了一个工作上传脚本,并且工作正常。但我想知道将上传状态附加到php脚本。上传状态也在php中,并且具有任何上传图像的演示值。 这是上传状态的代码。
//create the upload
$total = rand(1, 5000);// 5000 is the proposed image size in kb
$current = rand(1, $total);
$percent = round(($current/$total) * 100, 1);
echo "$current is $percent% of $total.<p/>";
这是上传状态的CSS;
<style type="text/css">
.outter{
height: 25px;
width: 500px;
border: solid 1px #000;
}
.inner{
height:25px;
width:<?php echo $percent ?>%;
border-right: solid 1px #000;
background: #f8ffe8; /* Old browsers */
background: -moz-linear-gradient(top, #f8ffe8 0%, #e3f5ab 33%, #b7df2d 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8ffe8), color-stop(33%,#e3f5ab), color-stop(100%,#b7df2d)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f8ffe8 0%,#e3f5ab 33%,#b7df2d 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f8ffe8 0%,#e3f5ab 33%,#b7df2d 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #f8ffe8 0%,#e3f5ab 33%,#b7df2d 100%); /* IE10+ */
background: linear-gradient(to bottom, #f8ffe8 0%,#e3f5ab 33%,#b7df2d 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8ffe8', endColorstr='#b7df2d',GradientType=0 ); /* IE6-9 */
}
</style>
上传状态的html:
<div class="outter">
<div class="inner"><?php echo $percent ?>%</div>
</div>
我有一个工作上传php脚本,它将图像上传到指定的文件夹。代码如下;
HTML
<!DOCTYPE html>
<html>
<body>
<form action="" method="post" enctype="multipart/form-data">
<p>
<label for="file">Filename:</label><br>
<input type="file" name="fileToUpload" id="fileToUpload">
</p>
<p>
<input type="submit" value="Upload Image" name="upload">
</p>
</form>
php脚本是
$target_dir = "images/";
$target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);
$uploadOk = 1;
$imageFileType = strtolower(pathinfo($target_file,PATHINFO_EXTENSION));
// Check if image file is a actual image or fake image
if(isset($_POST["upload"])) {
if($_FILES['fileToUpload']['size'] == 0 ){ // validate file input
echo '<p style="color: red;">file empty</p>';
}else{
$check = getimagesize($_FILES["fileToUpload"]["tmp_name"]);
if($check !== false) {
echo "<p style='color: red;' >File is an image - " . $check["mime"] . ".</p>";
$uploadOk = 1;
} else {
echo "<p style='color: red;'>File is not an image.</p>";
$uploadOk = 0;
}
// Check if file already exists
if (file_exists($target_file)) {
echo "<p style='color: red;'>Sorry, file already exists.</p>";
$uploadOk = 0;
}
// Check file size
if ($_FILES["fileToUpload"]["size"] > 500000) {
echo "<p style='color: red;'>Sorry, your file is too large.</p>";
$uploadOk = 0;
}
// Allow certain file formats
if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg"
&& $imageFileType != "gif" ) {
echo "<p style='color: red;'>Sorry, only JPG, JPEG, PNG & GIF files are allowed.</p>";
$uploadOk = 0;
}
// Check if $uploadOk is set to 0 by an error
if ($uploadOk == 0) {
echo "<p style='color: red;'>Sorry, your file was not uploaded.</p>";
// if everything is ok, try to upload file
} else {
if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file)) {
echo "<p style='color: green;' >The file <font>". basename( $_FILES["fileToUpload"]["name"]). "</font> has been uploaded.".basename( $_FILES["fileToUpload"]["name"])."</p>";
} else {
echo "<p style='color: red;'>Sorry, there was an error uploading your file.</p>";
}
}
}
}
所以现在我没有做的是
1。获取上传图片的实际存储空间。
2。将实际图片存储空间附加到$total
,并将上传序列附加到实际的上传工作上传脚本。
我需要整个脚本作为一个整体工作。
答案 0 :(得分:0)
如果我理解正确,您希望显示文件的上传进度。
据我所知,你无法在PHP中执行此操作,因为PHP文件在文件上传到服务器上后(通常在临时文件夹中)得到控制。
但是,使用XHR API可以获得一个百分比(要求客户端启用了javascript):
let xhr = new XMLHttpRequest()
// ...
xhr.upload.addEventListener('progress', (evt) => {
if (evt.lengthComputable) {
const percentage = (evt.loaded / evt.total) * 100
}
}, false)