Ajax 输出在网页上带来重复的 PHP 上传表单

Question

我正在尝试将http://malsup.com/jquery/form/progress.html 上的进度条集成到 php 上传表单中。它工作得很好，除了它在提交第一个表单后在同一页面上返回重复的上传表单。请参阅下面的表单截图。

Form Screen Shot

ajax 调用如下：

<script type="text/javascript">
(function() {

var bar = $('.bar');
var percent = $('.percent');
var status = $('#status');


$('#Myform').ajaxForm({
    beforeSend: function() {
        status.empty();
        var percentVal = '0%';
        bar.width(percentVal)
        percent.html(percentVal);
    },
    uploadProgress: function(event, position, total, percentComplete) {
        var percentVal = percentComplete + '%';
        bar.width(percentVal)
        percent.html(percentVal);
    },
    success: function() {
        var percentVal = '100%';
        bar.width(percentVal)
        percent.html(percentVal);
    },
    complete: function(xhr) {

        status.html(xhr.responseText);

    }
}); 

})(); 

html部分可以表示为：

<form id="#Myform" action="<?php echo $_SERVER["PHP_SELF"]; ?>" method="post" enctype="multipart/form-data"> 
<input type="file" name="DocFile"/>
<input type="submit" id="upload" value="Upload"/>
</form>

<div class="progress">
<div class="bar"></div >
<div class="percent">0%</div >
</div>
<div id="status"></div>

我将表单验证消息存储在 PHP 数组中，并将这些消息输出到我的上传脚本中的预定义 div。

xhr.responseText在#status div 中输出 PHP 验证消息，但它会导致出现重复的表单，如所附屏幕截图所示。

知道这里出了什么问题吗？

Answer 1

您的 PHP 功能（基于 action="<?php echo $_SERVER["PHP_SELF"]; ?>"）与您的其他 html（以及您的上传表单等）在同一页面上。 AJAX-Functionality 基本上只是加载带有表单参数的链接文件，并使用 PHP 执行后的全部内容作为结果。在您的情况下，内容包括您的回复以及您的表单。

现在如何解决这个问题？最简单的方法是在另一个文件中定义您的 PHP 并链接到该文件。为此，请将action="upload.php" 添加到您的<form>-Tag。然后创建一个新的 PHP-File：

上传.php

if(isset($_POST)) {
    ...
    echo "47";
}