2017-10-19 103 views
0

我發現這段代碼在jquery/ajax我編輯了一點,但由於某種原因輸出沒有價值。 這裏我的代碼(JavaScript文件):post undefined index ajax/jquery上傳到另一個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; 
} 

中的console.log確實具有價值的,但輸出文件(fototoevoegen說的undifend指數所有瓦爾:/ 有人可以幫助我在此感謝

// 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> 

發送信息到這個文件(../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

是調用返回成功,還是你得到一個錯誤代碼?你有沒有通過瀏覽器的網絡工具檢查過? – ADyson

+0

是的,我到目前爲止沒有錯誤 –

+0

只有我得到的錯誤是這樣的:未定義的索引文件C:xamp \ htdocs \ eigencmsv2 \ assets \ fototoevoegen.php在線
也在線:11/14/15/23 –

回答

0

我認爲這個問題是在這裏:

data:{ file, fotonaam, text} 

你需要你的價值附加到FORMDATA對象,然後發送對象。

如果你重新排列你的代碼一點點,讓你處理的,而不是你的按鈕表單的「提交」事件,那麼這將成爲非常簡單:

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); 
     } 
    }); 
    }); 
}); 

Uploading both data and files in one form using Ajax?參見一個類似的例子

相關問題