Javascript 提交后使用ajax和php上传图像

我有一个模式，通过表单向数据库提交一些信息和图像。我正在使用php和javascript…我不太擅长js，所以我需要一些帮助

到目前为止，我所做的工作是，我可以将数据从表单插入数据库而不会出现错误，但我不知道如何开始以及如何处理图像上传。我现在正在本地主机上工作

我想上传图像到本地文件夹，并自动重命名为有人通过表单输入的标题。因此，图像的名称保存到表中，图像保存在文件夹中

我将过去的代码在这里，所以如果有人可以帮助我的代码，我将不胜感激

阿贾克斯：

查询：

    <?php

include 'config.php';

$pdo = connect();

if(isset($_POST['InputTitle'], $_POST['InputYear'], $_POST['InputDuration'], $_POST['InputDescription'], $_POST['InputGender'])) {

    $InputTitle       = $_POST['InputTitle'];
    $InputYear        = $_POST['InputYear'];
    $InputDuration    = $_POST['InputDuration'];
    $InputDescription = $_POST['InputDescription'];
    $InputGender      = $_POST['InputGender'];
    $InputImage       = $_POST['InputImage'];

    $sql = $pdo->prepare("INSERT INTO filmovi(naslov,godina,trajanje,opis,id_zanr,slika) 
                          VALUES(:field1,:field2,:field3,:field4,:field5,:field6)");
    $sql->execute(array(':field1' => $InputTitle,
                        ':field2' => $InputYear, 
                        ':field3' => $InputDuration, 
                        ':field4' => $InputDescription, 
                        ':field5' => $InputGender,
                        ':field6' => $InputImage));
    $affected_rows = $sql->rowCount();  

}

回声'
'
回声'
描述
图像上传
选择电影的图像

接近

---

首先，您必须处理文件上载。这里的示例：其次，您需要弄清楚要在数据库中存储什么

<?php
include 'config.php';

$pdo = connect();

if(isset($_POST['InputTitle'], $_POST['InputYear'], $_POST['InputDuration'], $_POST['InputDescription'], $_POST['InputGender'])) {

    $InputTitle       = $_POST['InputTitle'];
    $InputYear        = $_POST['InputYear'];
    $InputDuration    = $_POST['InputDuration'];
    $InputDescription = $_POST['InputDescription'];
    $InputGender      = $_POST['InputGender'];

    $uploaddir = '/var/www/uploads/'; // Change this to be a path on your server
    $uploadfile = $uploaddir . basename($_FILES['InputImage']['name']);
    if (move_uploaded_file($_FILES['InputImage']['tmp_name'], $uploadfile)) {
         $InputImageStorePath = $uploadfile;
         $InputImage = $_FILES['InputImage']['name'];
    } else {
         $InputImage = "";
    }

    $sql = $pdo->prepare("INSERT INTO filmovi(naslov,godina,trajanje,opis,id_zanr,slika) 
                          VALUES(:field1,:field2,:field3,:field4,:field5,:field6)");
    $sql->execute(array(':field1' => $InputTitle,
                        ':field2' => $InputYear, 
                        ':field3' => $InputDuration, 
                        ':field4' => $InputDescription, 
                        ':field5' => $InputGender,
                        ':field6' => $InputImage));
    $affected_rows = $sql->rowCount();  

}
?>

---

您不能仅使用

$\u POST

的内容上传文件。查看

$\u文件

变量以及上载文件时使用的函数。还有这个：你能帮我在脚本中实现这个代码吗？也许，我想这取决于你想要代码做什么。我编辑代码的这一部分，我想在数据库中存储图像的名称。我需要用ajax代码做什么？它现在正在工作，图像保存在文件夹和数据库中。唯一的问题是当在模式中按submit时，模式保持打开状态，当我关闭它时，我需要刷新以查看更改查看更新以回答。如果这回答了您的问题，请检查答案。您更新的ajax代码不起作用，不会发生任何事情。图片上传成功了，但现在不行？！我在响应中得到了这个错误：第15行的C:\xampp\htdocs\WeCollect\inc\querys.php中的未定义索引：InputImage不必使用我的代码。这只是一个建议。可以恢复到您的代码或查看HTTP头以查看Post头中的内容。为此，我在FireFox中使用FireBug或HttpFox等工具。

    <form action="inc/queries.php" method="post" class="insert-movie" enctype="multipart/form-data">

  <div class="form-group"> <!-- TITLE -->
    <label for="title">Title</label>
    <input type="text" class="form-control" name="InputTitle" id="InputTitle" placeholder="Enter title" required>
  </div>

  <div class="form-group"> <!-- YEAR -->
    <label for="year">Year</label>
    <input type="date" class="form-control" name="InputYear" id="InputYear" placeholder="Year" required>
  </div>

  <div class="form-group"> <!-- DURATION -->
    <label for="year">Duration</label>
    <input type="time" class="form-control" name="InputDuration" id="InputDuration" placeholder="Duration" required>
  </div>

  <div class="form-group"> <!-- GENDER -->
    <label for="year">Gender</label></br>
    <select name="InputGender">
        <option>select a genre</option>
        <?php
        $pdo = connect();
        // display the list of all members in table view
        $sql = "SELECT * FROM zanr";
        $query = $pdo->prepare($sql);
        $query->execute();
        $list = $query->fetchAll();      

        foreach ($list as $rs) {
        ?>  
        echo'   
        <option name="InputGender" value="<?php echo $rs['id'] ?>"><?php echo $rs['naziv'] ?> </option>'

        <?php } ?>
    echo'   
    </select>
  </div>

  <div class="form-group"> <!-- DESCRIPTION -->
    <label for="year">Description</label>
    <textarea class="form-control" name="InputDescription" placeholder="Description" rows="3" required></textarea>
  </div>

  <div class="form-group"> <!-- IMAGE -->
    <label for="image">Image upload</label>
    <input type="file" name="InputImage" id="InputImage">
    <p class="help-block">Select image of movie.</p>
  </div>

<?php
include 'config.php';

$pdo = connect();

if(isset($_POST['InputTitle'], $_POST['InputYear'], $_POST['InputDuration'], $_POST['InputDescription'], $_POST['InputGender'])) {

    $InputTitle       = $_POST['InputTitle'];
    $InputYear        = $_POST['InputYear'];
    $InputDuration    = $_POST['InputDuration'];
    $InputDescription = $_POST['InputDescription'];
    $InputGender      = $_POST['InputGender'];

    $uploaddir = '/var/www/uploads/'; // Change this to be a path on your server
    $uploadfile = $uploaddir . basename($_FILES['InputImage']['name']);
    if (move_uploaded_file($_FILES['InputImage']['tmp_name'], $uploadfile)) {
         $InputImageStorePath = $uploadfile;
         $InputImage = $_FILES['InputImage']['name'];
    } else {
         $InputImage = "";
    }

    $sql = $pdo->prepare("INSERT INTO filmovi(naslov,godina,trajanje,opis,id_zanr,slika) 
                          VALUES(:field1,:field2,:field3,:field4,:field5,:field6)");
    $sql->execute(array(':field1' => $InputTitle,
                        ':field2' => $InputYear, 
                        ':field3' => $InputDuration, 
                        ':field4' => $InputDescription, 
                        ':field5' => $InputGender,
                        ':field6' => $InputImage));
    $affected_rows = $sql->rowCount();  

}
?>

$('form.insert-movie').on('submit', function(e) {
     e.preventDefault();
     var formData = new FormData($('form.insert-movie')),
         url = $(this).attr('action'),
         method = $(this).attr('method');

     $.ajax({
         url: url,
         type: 'POST',
         data: formData,
         success: function (msg) {                    
              alert("YOUR SUCCESS MESSAGE HERE");
              // Close Modal here with .hide() ?
         },
         error: function (msg) {
              alert("Error " + msg.d.toString());
         }
     });
 });