上传文件后通过 jQuery 更改页面内容 - PHP答案

【问题标题】：Change Page Content via jQuery after Uploading File - PHP上传文件后通过 jQuery 更改页面内容 - PHP
【发布时间】：2014-01-15 03:58:31
【问题描述】：

我不知道这样的问题是否已经被询问和回答，但无论我进行什么搜索查询，似乎都没有接近我想要做的事情。我正在开发一个用户将上传文件的项目。文件上传后，它将向用户显示成功消息以及一些文件信息。如果可能的话，我试图将所有内容都保存在一页内，但似乎无法使其正常工作。文件已上传，但信息未显示。

这是我正在使用的东西：

<?php
    if(isset($_POST['uploadFile']) && isset($_FILES['file'])) {
        move_uploaded_file($_FILES['file']['tmp_name'], "files/" . $_FILES['file']['name']);
        $message = "\"" . $_FILES['file']['name'] . "\" uploaded successfully...";
    }
?>
<html>
<head>
    <title>Upload File</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

    <script>
        $(document).ready(function() {
            $(".uploaded-file-info").hide();

            $(".uploadForm").submit(function() {
                $(".upload-form").hide();
                $(".uploaded-file-info").show();
            });
        });
    </script>
</head>
<body>
    <div class="upload-form">
        <form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" enctype="multipart/form-data" class="uploadForm" >
            <input type="file" name="file" /><br />
            <input type="submit" name="uploadFile" value="Upload File" />
        </form>
    </div>
    <div class="uploaded-file-info">
        <p><?php echo $message; ?></p>
    </div>
</body>
</html>

就像我说的，文件被上传，但表单并没有隐藏，文件信息 ($message) 也没有显示。有什么建议吗？

【问题讨论】：

我认为您在服务器端和客户端代码之间混淆了。当您提交表单时，页面将被刷新。如果您不希望表单再次显示，请不要在 PHP 中将其回显到浏览器。

标签： php jquery file-upload

【解决方案1】：

问题出在 JQuery 部分：

$(".uploadForm").submit(function() {
            $(".upload-form").show();
            $(".uploaded-file-info").show();
        });

加上这条线：

<form method="post"

JQuery部分是说：一旦页面上的表单提交，显示信息DIV。

“表单”部分只是说：提交表单。

因此，当您单击按钮时，表单被提交，同时 JQuery 被执行。但是您刚刚发布的表单需要“刷新”页面以从服务器获取响应。基本上，您编写的 JQuery 在您提交时会显示您的 div。这意味着它会在几分之一秒内工作，但会显示一个空 div，因为服务器的响应还没有出现。

你可能想要做的是：

页面加载时
并且上传的文件信息中有内容
显示信息并隐藏表单。

使用以下内容添加样式标记：

<style>
.uploaded-file-info {
        display: none;
}
</style>

当页面加载时，它总是会隐藏上传的文件信息。

然后，使用以下代码更改您的 JavaScript 代码：

 <script>
    $(document).ready(function() {
      if ($('.uploaded-file-info > p').html() != "") {
          $(".uploaded-file-info").show();      
      }
    });
</script>

它表示当页面加载时，如果子项内部存在某些东西

元素“uploaded-file-info”，然后显示它。否则，什么都不做。

一个更简单的解决方案是仅在上传文件时使用 php（在服务器端）显示块。不需要 JQuery（客户端）代码。

删除所有 JQuery 代码和 "

<?php if ($message != '') { ?>
    <div class="uploaded-file-info">
    <p><?php echo $message; ?></p>
    </div>
<?php } ?>

接下来会发生什么：

您（从浏览器）发布表单
服务器收到您的帖子
如果有文件上传，它会启动你的“消息”变量
如果消息变量存在，服务器会将“div upload-file-info”放入响应中。如果不是，则“如果”包围的所有内容都不会放入响应中。
您的浏览器将收到响应并将其显示在屏幕上。

【讨论】：

从技术上讲，'.uploaded-file-info > p' 永远不会为空，因为其中包含 PHP。
查看它是否真的为空的另一种方法是检查页面的来源。转到您的页面并键入“ctrl+u”（适用于大多数浏览器）或查找“查看源代码”选项的位置。你会明白我的意思。您不会在任何页面中看到。例如，如果您在堆栈溢出时检查此页面的来源，您是否看到服务器代码的任何部分（php、asp.net，无论它是什么）？不，因为它已经被服务器执行了。如果你确实在你的网页源代码中看到了这样的服务器代码，那是因为服务器有问题，它没有执行代码。
我必须道歉。我试图通过 $message 而不确保它已设置。所以，它输出了一个错误。这使得它不再为空。在我添加if(isset($message)) { ... } 之后，它起作用了。谢谢！将您的解决方案标记为答案。我也会+1，但我的“声誉”还不够高。再次感谢！