如何制作包含上传文件输入的表单

时间:2016-02-21 18:59:46

标签: php html database forms image-uploading

您好我正在尝试创建一个包含上传文件输入的表单。 我的表单是将数据发送到我的数据库,而上传的文件存储在img文件夹中。

现在没有上传输入的表单工作正常。没有表单的上传脚本也可以正常工作。但我无法让他们一起工作。我试图在我的主窗体脚本中包含“上传脚本”,但它没有用。我实际上不知道应该如何完成这个程序。

我想要做的是,当我提交表单时,数据会进入数据库,而上传文件会进入我的img文件夹。我认为问题来自于提交按钮。

很抱歉发布我的所有代码,但我认为有必要了解...

这是我的addOutfit.php(将我的表单数据发送到我的数据库)

    require("ajax/db.php"); 

    $message = " "; 

    if ( $_POST ) {

    if (!empty($_POST['type'])){ 

    $title = htmlspecialchars($_POST['title']);
    $description = htmlspecialchars($_POST['description']);
    $brand = htmlspecialchars($_POST['brand']);
    $material = htmlspecialchars($_POST['material']);
    $type = htmlspecialchars($_POST['type']);
    $color = htmlspecialchars($_POST['color']);

    $sql = "INSERT INTO outfit (title, description, brand, material,  type, color) VALUES('$title', '$description', '$brand', '$material', '$type', '$color')";
    $statement = $pdo->prepare($sql);

    $statement->execute(['title' => $title, 'description' => $description, 'brand' => $brand, 'material' => $material, 'type' => $type, 'color' => $color]);

  $message = "The item has been added"; 
   } else {

   $message = "The type field is compulsory"; 
   }
 }
 ?>


 <!--AddOutfit form-->
 <div class="container-fluid" id="addOutfitForm" >

 <div class="col-xs-12 col-md-10">
 <form action ="addOutfit.php" method="post" novalidate> 

  <?php if ( $message ) { ?>
  <h3 style="color: red;"><?=$message?></h3>
  <?php } ?>

   <div class="form-group">
    <label for="title">Title</label>
    <input type="text" class="form-control" name="title">
    </div>

    <div class="form-group">
    <label for="description">Description</label>
    <textarea class="form-control" rows="3" name="description"></textarea>
    </div>

    <div class="form-group">
    <label for="type">Type</label>
    <input type="text" class="form-control" name="type">
    </div>

    <div class="form-group">
    <label for="brand">Brand</label>
    <input type="text" class="form-control" name="brand">
    </div>


    <div class="form-group">
    <label for="color">Color</label>
    <input type="text" class="form-control" name="color">
    </div>

    <div class="form-group">
    <label for="material">Material</label>
    <input type="text" class="form-control" name="material">
    </div>

   <div class="form-group" action="upload.php" method="post" enctype="multipart/form-data">
    <label for="fileToUpload">Picture</label>
    <input type="file" name="fileToUpload" id="fileToUpload">
   </div>

     <button type="submit" class="btn btn-default" name="submit" value="Upload Image">Send</button>     

  </form>
</div>

这是我的upload.php(我的上传文档脚本)

   <?php
    $target_dir = "img/";
    $target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);
    $uploadOk = 1;
    $imageFileType = pathinfo($target_file,PATHINFO_EXTENSION);

    if(isset($_POST["submit"])) {
    $check = getimagesize($_FILES["fileToUpload"]["tmp_name"]);

    if($check !== false) {
    echo "File is an image - " . $check["mime"] . ".";
    $uploadOk = 1;
    } else {
    echo "File is not an image.";
    $uploadOk = 0;
    }
   }

   if (file_exists($target_file)) {
    echo "Sorry, file already exists.";
    $uploadOk = 0;
   }

   if ($_FILES["fileToUpload"]["size"] > 500000) {
   echo "Sorry, your file is too large.";
   $uploadOk = 0;
   }

   if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg" && $imageFileType != "gif" ) {
echo "Sorry, only JPG, JPEG, PNG & GIF files are allowed.";
$uploadOk = 0;
}

if ($uploadOk == 0) {
echo "Sorry, your file was not uploaded.";

 } else {
 if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file)) {
    echo "The file ". basename( $_FILES["fileToUpload"]["name"]). " has been uploaded.";
    } else {
      echo "Sorry, there was an error uploading your file.";
     }
    }

3 个答案:

答案 0 :(得分:0)

你的方法有点令人困惑。您需要检查是否有POST请求将数据存储在db中,并检查是否有要上传的文件

if(isset($_POST)) {
 // validate and insert the data into db

 // if isset $_FILES["fileToUpload"] update the file
 if(isset($_FILES) && isset($_FILES["fileToUpload"]['name'])) {

 }
}

另外不要忘记将enctype =“multipart / form-data”属性添加到表单

<form action ="addOutfit.php" enctype="multipart/form-data" method="post" novalidate>

答案 1 :(得分:-1)

我认为您只需要将enctype="multipart/form-data"属性添加到<form>代码中。

请参阅http://www.w3schools.com/tags/att_form_enctype.asp

提交文件仅在表单数据以多部分提交时才有效。

答案 2 :(得分:-1)

而不是

<div class="form-group" action="upload.php" method="post" enctype="multipart/form-data"> <label for="fileToUpload">Picture</label>

你试过了吗?

<form action ="addOutfit.php" method="post" enctype="multipart/form-data" novalidate>