Question

我有以下html和php代码来读取html页面中的上传文件并在另一个新页面中显示其内容，但我希望在同一个html页面中显示文件内容而无需打开新选项卡并刷新，我怎么能实现呢？

HTML：

<html>
    <body>

        <form action="upload_file.php" method="post"
              enctype="multipart/form-data">
            <label for="file">Filename:</label>
            <input type="file" name="file" id="file"><br>
            <input type="submit" name="submit" value="Submit">
        </form>
   </body>
</html>

PHP：upload_file.php

<?php
    if ($_FILES["file"]["error"] > 0)
    {
        echo "Error: " . $_FILES["file"]["error"] . "<br>";
    }
    else
    {
        echo "Upload: " . $_FILES["file"]["name"] . "<br>";
        echo "Type: " . $_FILES["file"]["type"] . "<br>";
        echo "Size: " . ($_FILES["file"]["size"] / 1024) . " kB<br>";
        echo "Stored in: " . $_FILES["file"]["tmp_name"];
    }
?>

Answer 1

您可以使用php检查是否单击了提交按钮，然后继续显示数据。

PHP：upload.php

<?php
    //checks if the submit button is submitted
    if(isset($_POST['submit']) && $_POST['submit'] == "Submit") {
        if ($_FILES["file"]["error"] > 0) {
            echo "Error: " . $_FILES["file"]["error"] . "<br>";
        }
        else {
            echo "Upload: " . $_FILES["file"]["name"] . "<br>";
            echo "Type: " . $_FILES["file"]["type"] . "<br>";
            echo "Size: " . ($_FILES["file"]["size"] / 1024) . " kB<br>";
            echo "Stored in: " . $_FILES["file"]["tmp_name"];
        }
    }
?>
<html>
    <body>
        <form action="upload.php" method="post" enctype="multipart/form-data">
            <label for="file">Filename:</label>
            <input type="file" name="file" id="file"><br>
            <input type="submit" name="submit" value="Submit">
            </form>
    </body>
</html>

Answer 2

您可以使用iframe

<强> HTML

<html>
    <body>
        <script>
            function ajaxFileUpload(upload_field)
            {   
                var filename = upload_field.value;
                upload_field.form.action = 'upload_file.php';
                upload_field.form.target = 'upload_iframe';
                upload_field.form.submit();     

                return true;
            }
        </script>
        <iframe name="upload_iframe" id="upload_iframe" ></iframe>

        <form action="#" method="post" enctype="multipart/form-data">
            <label for="file">Filename:</label>

            <input type="file" name="file" id="file" onchange="return ajaxFileUpload(this);">
        </form>
    </body>
</html>

<强> upload_file.php

 <?php
     if ($_FILES["file"]["error"] > 0)
     {
         echo "Error: " . $_FILES["file"]["error"] . "<br>";
     }
     else
     {
         echo "Upload: " . $_FILES["file"]["name"] . "<br>";
         echo "Type: " . $_FILES["file"]["type"] . "<br>";
         echo "Size: " . ($_FILES["file"]["size"] / 1024) . " kB<br>";
         echo "Stored in: " . $_FILES["file"]["tmp_name"]. " <br>";
         $content = file_get_contents($_FILES["file"]["tmp_name"]);

         echo "Content: ".$content; 
     }
   ?>

如何在同一页面上显示上传的文件内容而不刷新？

2 个答案: