require_once（）或AJAX导致php脚本运行两次

Question

我按照步骤逐步制作存储会话变量的表单。

在一个步骤中，我有一个文件上传，预览图像并显示一个上传按钮，当按下时调用需要修改$ _SESSION变量的php脚本，以及回显上传文件的路径。

当我测试它在我的调试器没有require_once('config.php')，它的工作原理完全如我预期，显示图像和它的文件名，但是，出于某种原因，当我包括配置文件，当我通过它在我的调试器遍历，它似乎运行php脚本两次，它正确更新会话变量，但文件名不再回显，并且数据在到达前端之前丢失。

我不知道错误是在config.php文件中，还是在AJAX调用中，或者也许是我错过的其他地方。

的标记（ 'step4.php'）：

<form method="post" action="step5.php"> 
    <span id="newfile"> 
     <input type="file" name="uploaded_file" id="imageupload" accept=".jpg, .jpeg, .png"> 
     <img alt="Preview Loading..." id="imagepreview"> 
    </span> 
    <!-- The submit button is elsewhere before the end of the form, it acts as a next button --> 
</form> 

JavaScript函数：

$(document).on('click', '#uploadbutton', function(e) { 
    e.preventDefault(); 
    //Grab upload elements and and file 
    var uploadbutton = this; 
    var uploader = document.getElementById('imageupload'); 
    var file = document.getElementById('imageupload').files[0]; 
    //Hide the upload elements 
    uploadbutton.parentNode.removeChild(uploadbutton); 
    uploader.parentNode.removeChild(uploader); 
    //Make the form and pass it to server 
    var formData = new FormData(); 
    formData.append('file', file); //$_FILES['file'] 
    $.ajax({ 
     url: 'uploadfile.php', 
     type: 'POST', 
     data: formData, 
     processData: false, 
     contentType: false 
    }) 
    .done(function(data) {//Data is the relative path to the file 
     //Hide the old content 
     document.getElementById('newfile').innerHTML = ''; 
     //Show the new image 
     var text = document.createTextNode('Uploaded File: '+data.replace('temp/', '', data)); 
     var br = document.createElement("br"); 
     var imgElement = document.createElement("IMG"); 
     imgElement.setAttribute('src', data); 
     document.getElementById('newfile').appendChild(text); 
     document.getElementById('newfile').appendChild(br); 
     document.getElementById('newfile').appendChild(imgElement); 
    }) 
    .fail(function() { 
     alert("Error uploading the file. Hit refresh and try again."); 
    }); 
}); 

'uploadfile.php'（我的调试器显示被执行两次的.. 。）

<?php 
//require_once('config.php'); //THE PROBLEM? 

if($_FILES) { 
    //Get the uploaded file information 
    $name_of_uploaded_file = $_FILES['file']['name']; 
    //Actually upload the file to the server! 
    $upload_folder = 'temp/'; //Make a file named temp 
    $path_of_uploaded_file = $upload_folder.$name_of_uploaded_file; 
    $tmp_path = $_FILES["file"]["tmp_name"]; 

    if(is_uploaded_file($tmp_path)) { 
     copy($tmp_path,$path_of_uploaded_file); 
     $_SESSION['step4filepath'] = $path_of_uploaded_file; 
     echo $path_of_uploaded_file; 
    } 
} 

?> 

'的config.php'：一，当它附带的螺丝东西了

<?php 
session_start(); 

//Initialize session data 
if(empty($_SESSION)) { 
    if(!isset($_SESSION['step4filepath'])) { 
     $_SESSION['step4filepath'] = ''; 
    } 
} 

//Update session data 
if($_SERVER['REQUEST_METHOD'] === 'POST') { 

    if($_SESSION['currentPage'] == 4) { 
     //input for step 4, we just want filename if they submit the form 
     $_SESSION['step4filepath'] = $_POST['step4filepath']; 
    } 
    //Enable us to hit the back button! 
    header("Location: " . $_SERVER['REQUEST_URI']); 
} 
?> 

完全失去了这一点。

Answer 1

可能是这吗？为什么该行在你的配置文件中？

header("Location: " . $_SERVER['REQUEST_URI']); 

Answer 2

看起来config.php文件与$ _ POST [ 'step4filepath']替换的$ _SESSION [ 'step4filepath']的值，而不是把它当作$ path_of_uploaded_file。

EDIT

如在别处提到的那样，首标（）将产生一个重载。我的答案是无关紧要的，因为在设置var之前调用config.php。

Answer 3

解决方案1 ​​

更换

$(document).on('click', '#uploadbutton', function(e) { 

要

$(document).off('click').on('click', '#uploadbutton', function(e) { 

解决方案2：请参见下面的示例代码

$(document).on("click", "#someID", function(e) { 
    $(this).attr("disabled","disabled"); 
    // Disabling the input stops the event from firing multiple times. 
    var targetObj = $(this); 
    // targetObj can be used within the $.POST function, not $(this) 
    var myVariable = "Hello world"; 
    $.post("/DoSomethingAJAXY.php", { variable1: myVariable }, 
    function(data, status){ 
    if (status == "success") { 
     // Do something 
    } 
    $(targetObj).removeAttr("disabled"); 
    // Re-enable the event input trigger 
}); 
}