Выход Ajax приносит дублируемую форму загрузки PHP на веб-странице

Question

Я пытаюсь интегрировать индикатор выполнения, доступный в http://malsup.com/jquery/form/progress.html, в форму загрузки php. Он работает хорошо, за исключением того, что он возвращает дублируемую форму загрузки на той же странице после отправки первой формы. См. Снимки экрана ниже.

Form Screen Shot

Аякса вызов следующее:

<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 выводит сообщения проверки PHP в #status div, но вызывает появление дублирующей формы в соответствии с прилагаемым скриншотом.

Все мысли есть неправильно?

Answer 1

Ваша PHP-функция (на основе action="<?php echo $_SERVER["PHP_SELF"]; ?>") на той же странице, что и ваш другой html (также ваша форма загрузки среди других). Функциональность AJAX в основном просто загружает связанный файл с параметрами формы и в результате использует весь контент после выполнения PHP. В вашем случае контент включает ваш ответ, а также вашу форму.

Теперь, как решить эту проблему? Самый простой способ - определить ваш PHP в другом файле и ссылку на него. Для этого добавьте action="upload.php" к вашему <form> -Tag. Затем создайте новый PHP-файл:

upload.php

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