php上传状态显示附件

时间:2018-02-17 10:10:35

标签: php

我在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,并将上传序列附加到实际的上传工作上传脚本。

我需要整个脚本作为一个整体工作。

1 个答案:

答案 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)