Question

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

以下是我正在使用的内容：

<?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）也没有显示。有什么建议吗？

Answer 1

问题是JQuery部分：

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

加上这一行：

<form method="post"

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

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

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

您可能想要做的事情是：

页面加载时
并且upload-file-info
显示信息并隐藏表单。

使用以下内容添加Style标记：

<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（客户端）代码。

删除“＆lt; style＆gt;”中的所有JQuery代码和代码标签和替换环绕你的“div class =”uploaded-file-info“与这样的IF：

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

接下来会发生什么：

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

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

1 个答案: