Question

我在jquery / ajax中发现这个代码我编辑了一点但由于某种原因输出没有值。这里我的代码（javascript文件）：

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

?>

Answer 1

我认为问题在于：

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?

将未定义的索引ajax / jquery上传到另一个php文件

1 个答案: