Question

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

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> - 标记中。然后创建一个新的PHP文件：

upload.php的

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

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

1 个答案: