アップロードされたファイルがJavaScriptからPHPへとパススルーされない

Question

ここでは、HTML-> JavaScript-> PHPからアップロードされたファイルとテキスト入力を渡そうとしています。しかし、それはテキスト入力を渡すだけで、ファイルを渡すことができませんでした。私はそのファイルをPHPで取得していません。その結果、PHPファイル内の "$ u_file"に対して未定義のインデックスエラーが表示されます。私はどこに問題があるのか​​理解していない。ここで

は、ここでHTMLファイル

<form class="form-horizontal" action=""> 
     <h2><b>Post your job</b></h2><br><br> 

     <div class="form-group"> 
      <label class="control-label col-sm-2">Job Position:</label> 
      <div class="col-sm-10"> 
       <input type="text" class="form-control" id="jName" placeholder="Enter job name" name="jName" required> 
       <p id="jErr"></p> 
      </div> 
     </div> 

     <div class="form-group"> 
      <form class="form-horizontal" action="" method="post" enctype="multipart/form-data"> 
        <label class="control-label col-sm-2">Add some detailed description:</label> 
       <div class="col-sm-10"> 
        <input id="u_file" value="u_file" type="file" name="u_file" size="5000000" multiple onchange="showname()"><br><br> 
       </div> 
      </form> 
     </div> 


     <div class="container-fluid text-center"> 
     <br><button name="submitJob" id="submitJob" type="submit" class="btn btn-default" onclick="job_checker()">Submit</button> 
     <p id="submitJobErr"></p></div> 

    </form> 

JavaScriptがここ

signFlagj = 0; 

function job_checker() { 
    checkJobName(); 
    databasejobEntry(); 
} 

function checkJobName() { 

    var jobnameET = document.getElementById("jName"); 
    var jobnameError = document.getElementById("jErr"); 

    jobname = jobnameET.value; 
    console.log(jobname); 

    var regex = /^[a-zA-Z ]*$/; 
    if(!regex.test(jobname)){ 
     jobnameError.innerHTML = "Only letters and white space allowed"; 
     signFlagj = 1; 
    } 
    else { 
     jobnameError.innerHTML = ""; 
    } 

} 

function showname() { 
    jobFilename = document.getElementById('u_file'); 
    console.log('Selected file: ' + jobFilename.files.item(0).name); 
    console.log('Selected file: ' + jobFilename.files.item(0).size); 
    console.log('Selected file: ' + jobFilename.files.item(0).type); 
} 

function databasejobEntry() { 

    if(signFlagj==1) { 
     console.log("fill up correctly!"); 
     alert("Sign up correctly!"); 
    } 
    else 
    { 
     console.log('Selected file: ' + jobFilename.files.item(0).name); 
     console.log(jobname); 

     var submitError = document.getElementById("submitJobErr"); 
     var xhttp = new XMLHttpRequest(); 
     xhttp.onreadystatechange = function() { 
      console.log(this.readyState); 
      if(this.readyState == 4 && this.status == 200) 
      { 
       console.log(this.status); 
       var response = xhttp.responseText; 
       console.log(response); 
       submitError.innerHTML=response; 
       alert(response); 
       if(String(response.trim()) === "Success") { 
        alert("Successfully submitted :)"); 
        window.location.href = "uploadJob.html"; 
       } 
      } 
     } 

     xhttp.open("GET", "uploadJob.php?jobname="+jobname+"&jobFilename="+jobFilename,true); 
     xhttp.send(); 
    } 

} 

ファイルPHPファイル

を行く行く行きます

require_once('DBconnection.php'); 

ini_set('display_errors', 1); 
ini_set('log_errors', 1); 

$val=""; 
$jobName = $_GET["jobname"]; 
echo "$jobName"; 

$u_file = $_FILES['jobFilename']; 

$file_type = $_FILES['jobFilename']['type']; 
$file_size = $_FILES['jobFilename']['size']; 
$file_name = $_FILES['jobFilename']['name']; 

print_r($u_file); 
//echo "****************"; 

$currentdir = getcwd(); 
$targetfolder = $currentdir . "/testupload/"; 
// echo "****************"; 
print_r($targetfolder); 

$targetfile = $targetfolder . basename($_FILES['jobFilename']['name']) ; 

//print_r($targetfolder); 


print_r($currentdir); 
//echo "****************"; 

$uploadOk=1; 

print_r($file_type); 

if ($file_type != "application/pdf" && $file_type != "image/png" && $file_type != "image/jpeg" && $file_type != "image/jpg") { 
    echo "Sorry, only JPG, JPEG, PNG & PDF files are allowed."; 
    $uploadOk = 0; 
} 


if (file_exists($targetfile)) { 
    echo "Sorry, file already exists."; 
    $uploadOk = 0; 
} 


if($uploadOk==0){ 
    echo "Problem in uploading file"; 
} 

else { 
    if(move_uploaded_file($_FILES['jobFilename']['tmp_name'], $targetfile)) { 

     $fileUpQueryjob = "INSERT INTO jobs (job_name,job_filename) VALUES ('$jobName','$file_name')"; 
     $upJob = $db->query($fileUpQueryjob); 
     if ($upJob == true) { 
      $val = "Success"; 
      echo "The file ". basename($_FILES['jobFilename']['name']). " is uploaded"; 
     } 
     else 
      echo "Error: " . $fileUpQueryjob . "<br>" . mysqli_error($db); 
    } 
} 

//echo "$val"; 
$db->close(); 

Answer 1

GET要求の代わりにPOST要求を使用します。必要であれば、新しいFormDataにワープして投稿します。