提交后用ajax和php上传图片

时间:2015-05-14 14:09:23

标签: javascript php jquery ajax forms

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

到目前为止,我所做的工作是,我可以将数据从表单插入数据库而不会出现任何错误,但我不知道如何启动以及如何处理图像上传。我现在在localhost上工作。

我想将图片上传到本地文件夹并自动将其重命名为某人通过表单输入的标题。因此,图像的名称保存到表格和文件夹中的图像。

我会在这里通过代码,所以如果有人可以帮我处理代码,我会很感激。

AJAX:

    $(document).ready(function(){

    $('form.insert-movie').on('submit', function(e) {
        e.preventDefault();

        var that = $(this),
            url = that.attr('action'),
            method = that.attr('method'),
            data = {};

        that.find('[name]').each(function(index, value) {
            var that = $(this),
                name = that.attr('name'),
                value = that.val();

            data[name] = value;
        }); 

        $.ajax({
            url: url,
            type: 'POST',
            data: data,
            success: function (msg) {                    
               alert("YOUR SUCCESS MESSAGE HERE");
            },
            error: function (msg) {
                alert("Error " + msg.d.toString());
            }
        });
        return false;
    });

});

查询:

    <?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();  

}

模态:

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

    关             

1 个答案:

答案 0 :(得分:0)

首先,您必须处理文件上传。这里的示例:http://php.net/manual/en/features.file-upload.post-method.php其次,您需要确定要在数据库中存储的内容。

<?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();  

}
?>

我建议将FormData用于您的AJAX:

$('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());
         }
     });
 });