上传文件后通过jQuery更改页面内容-PHP_Php_Jquery_File Upload

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

php jquery file-upload

上传文件后通过jQuery更改页面内容-PHP,php,jquery,file-upload,Php,Jquery,File Upload,我不知道像这样的问题是否已经被问到和回答，但因为无论我做什么搜索查询，似乎都没有什么接近我想要做的。我正在做一个项目，用户将上传一个文件。文件上传后，将向用户显示一条成功消息以及一些文件信息。如果可能的话，我试图把这些都放在一页之内，但似乎无法让它发挥作用。文件已上载，但信息不显示以下是我正在处理的一些问题： <?php if(isset($_POST['uploadFile']) && isset($_FILES['file'])) { move

我不知道像这样的问题是否已经被问到和回答，但因为无论我做什么搜索查询，似乎都没有什么接近我想要做的。我正在做一个项目，用户将上传一个文件。文件上传后，将向用户显示一条成功消息以及一些文件信息。如果可能的话，我试图把这些都放在一页之内，但似乎无法让它发挥作用。文件已上载，但信息不显示

以下是我正在处理的一些问题：

<?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>


上载文件
$（文档）.ready（函数（）{
$（“.upload file info”）.hide（）；
$（“.uploadForm”）.submit（函数（）{
$（“.upload form”）.hide（）；
$（“.upload file info”）.show（）；
});
});
问题在于JQuery部分：
$(".uploadForm").submit(function() {
            $(".upload-form").show();
            $(".uploaded-file-info").show();
        });

再加上这条线：
<form method="post"

我认为您正在混淆服务器端代码和客户端代码。提交表单时，页面将刷新。如果不希望表单再次显示，请不要将其回显到PHP中的浏览器中。从技术上讲，”。上载的文件info>p“
将永远不会为空，因为其中包含PHP。查看表单是否真的为空的另一种方法是检查页面的源代码。转到您的页面并键入“ctrl+u”（在大多数浏览器上都适用）或查找“查看源代码”选项的位置。你会明白我的意思的。你在任何页面上都看不到。例如，如果您在堆栈溢出上检查此页面的源代码，您是否看到服务器代码的任何部分（php、asp.net，无论是什么）？否，因为它已由服务器执行。如果你在网页源代码中看到这样的服务器代码，那是因为服务器有问题，它没有执行代码。我必须道歉。我试图在没有确认设置的情况下传递$message
。所以，它输出了一个错误。这使它不再是空的。在我添加了if（isset（$message））{…}之后，它工作了。非常感谢。将您的解决方案标记为答案。我也会+1，但我的“声誉”还不够高。再一次，谢谢！
<style>
.uploaded-file-info {
        display: none;
}
</style>

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

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