2017-10-19 14 views
0

J'ai trouvé ce code dans jquery/ajax j'ai édité un peu mais pour une raison quelconque la sortie n'a pas de valeur. ici mon code (fichier javascript):post undefined index ajax/jquery télécharger vers un autre fichier php

function fototoevoegen(){ 

var fotonaam = document.getElementById('fotonaam').value 
var text = document.getElementById('text').value 
var file = new FormData(); 
console.log(fotonaam); 
console.log(text); 
console.log(file); 
    file.append('file',$('.file')[0].files[0]); 
    $.ajax({ 
     url: "../assets/fototoevoegen.php", 
     type: "POST", 
     data:{ file, fotonaam, text}, 
     processData: false, 
     contentType: false, 
     cache:false, 
     beforeSend:function(){ 
      $(".result").text("Loading ..."); 
     }, 
     success:function(data){ 
      $(".result").html(data); 
      alert(data); 
     } 
    }); 
    return false; 
} 

la console.log n'ont Apprécions mais le fichier de sortie (fototoevoegen disent de undifend index à tous vars:/ quelqu'un peut me aider sur ce grâce

// fichier HTML //

<!DOCTYPE html> 
    <html> 
    <head> 
     <title>CMS V1.2</title> 
     <meta charset="utf-8"> 
     <link rel="stylesheet" type="text/css" href="../css/style2.css"> 
    </head> 
     <body> 
      <div class="content"> 
        <h2>Foto Database</h2> 
       <br/> 
        <form method="post"> 
         <input type="hidden" name="size" required="required" value=""> 
         <div> 
          <input type="file" id="file" class="file"> 
         </div> 
         <br/> 
         <div> 
          <input type="text" id="fotonaam" placeholder="fotonaam"> 
         </div> 
         <br/> 
         <div> 
          <textarea id="text" cols="40" rows="4" placeholder="foto omschrijving"></textarea> 
         </div> 
         <br/> 
         <div> 
          <input type="button" value="Upload Foto" onclick="fototoevoegen();"> 
         </div> 
         <br/> 
        </form> 
      </div> 
      <div class="container3Titel"> 
       <h2>Alle foto's in het database </h2> 
      </div> 
      <div class="container3"> 
          <?php foreach ($fotos as $foto){ ?> 
          <div class ="container3item"> 
           <form method ="get"> 
            <h2><?= $foto['foto_naam']?></h2> 
            <img src="<?= $foto['foto_url']?>" width="300" height="170"/> 
            <p> <?= $foto['foto_omschrijving']?> </p> 
            <p> <?= $foto['foto_url']?> </p> 
            <input type=hidden id="fotourl" value="<?= $foto['foto_url']?>"> 
            <input type=hidden id="foto_id" value="<?= $foto['foto_id']?>"> 
            <input type="button" name="verwijderen" value="Foto Verwijderen" onclick="fotoverwijderen();"> 
           </form> 
          </div> 
          <?php } ?> 

        </div> 
      </div> 
     </body> 
    </html> 

informations envoyées à ce fichier (../assets/fototoevoegen.php)

<?php 

include_once('../includes/connection.php'); 

    // de folder waar alle foto's worden opgeslagen 
    $folder = "../foto/"; 
    $info = $_FILES["file"]["name"]; 
    // extentie herkennen van het bestand en deze toevoegen aan de url 
    $ext = pathinfo($info, PATHINFO_EXTENSION); 
    $ext = '.'.$ext; 
    $naam = $_POST['fotonaam'].$ext; 
    $full_path = $folder.$naam; 
    // omschrijving en foto naam aan variable geven voor insert query 
    $omschrijving = $_POST['text']; 
    $fotonaam = $_POST['fotonaam']; 

    echo($naam); 
    echo($fotonaam); 
    echo($omschrijving); 
    echo($info); 

    // de foto of het bestand opslaan in een map (foto's) 
    if (move_uploaded_file($_FILES['foto']['tmp_name'], $full_path)) { 
     //als het uploaden gelukt is voer je een query uit naar de database zodat deze later nog gebruikt kan worden. 
     $query = $pdo->prepare("INSERT INTO fotobibliotheek (foto_naam,foto_omschrijving,foto_url) VALUES(?,?,?)"); 
     $query->bindValue(1,$fotonaam); 
     $query->bindValue(2,$omschrijving); 
     $query->bindValue(3,$full_path); 
     $query->execute(); 
     // succes melding weergeven en redirect naar pagina bibliotheek 
     echo "De foto is opgeslagen"; 
    } else { 
     //fout melding als er niet geupload kan worden 
     echo 'uploaden mislukt'; 
     } 

?> 
+0

est l'appel renvoyé avec succès, ou obtenez-vous un code d'erreur? Avez-vous vérifié cela via les outils réseau de votre navigateur? – ADyson

+0

Oui, je n'ai fait aucune erreur jusqu'à présent –

+0

seule erreur que je reçois est la suivante: fichier d'index indéfini C: xamp \ htdocs \ eigencmsv2 \ assets \ fototoevoegen.php sur la ligne
et aussi en ligne: 11/14/15/23 –

Répondre

0

Je pense que le problème est ici:

data:{ file, fotonaam, text} 

Vous devez ajouter vos valeurs à votre objet formData puis envoyer cet objet.

Si vous réorganisez votre code un peu afin que vous gérez l'événement « Soumettre » de votre formulaire, au lieu de votre bouton, cela devient assez simple:

HTML:

<form id="fotoForm" method="post" enctype="multipart/form-data"> 
    <input type="hidden" name="size" required="required" value=""> 
    <div> 
    <input type="file" id="file" name="file" class="file"> 
    </div> 
    <br/> 
    <div> 
    <input type="text" id="fotonaam" name="fotonaam" placeholder="fotonaam"> 
    </div> 
    <br/> 
    <div> 
    <textarea id="text" cols="40" rows="4" name="text" placeholder="foto omschrijving"></textarea> 
    </div> 
    <br/> 
    <div> 
    <input type="submit" value="Upload Foto"> 
    </div> 
    <br/> 
</form> 

JavaScript:

$(function() { 
    $("#fotoForm").submit(function(event) { 
    event.preventDefault(); //prevent default non-ajax postback 

    var data = new FormData(this); //pass the form into the formData object 
    $.ajax({ 
     url: "../assets/fototoevoegen.php", 
     type: "POST", 
     data: data, 
     processData: false, 
     contentType: false, 
     cache: false, 
     beforeSend: function() { 
     $(".result").text("Loading ..."); 
     }, 
     success: function(data) { 
     $(".result").html(data); 
     alert(data); 
     } 
    }); 
    }); 
}); 

Voir aussi Uploading both data and files in one form using Ajax? pour un exemple similaire