通过表单上传文本和图像

Question

我正在尝试使用 dropzone.js 创建拖放功能来上传图片。

表单页面上的代码

<script type="text/javascript" src="js/dropzone.js"></script>
<form action="upload.php" class="dropzone">
</form>

上传.php

<?php
if(!empty($_FILES))
  {
    $targetDir = "uploads/";
    $fileName = $_FILES['file']['name'];
    $targetFile = $targetDir.$fileName;

    if(move_uploaded_file($_FILES['file']['tmp_name'],$targetFile))
      {
         $conn->query("INSERT INTO files (file_name) VALUES('".$fileName."')");
      }
  }
?>

上面的代码在我放下图片后立即上传图片，但我也希望在表单中输入以下详细信息，点击提交按钮后，它应该与图片一起保存在数据库中

<input type="text" name="title"  value="Title" />
<textarea name="text" ></textarea>
<input type="text" name="email"  value="Email" />
<input type="submit" name="edit" alt="edit" value="Submit"/>

谁能告诉我怎么做

Answer 1

为避免图片一丢就上传，可以使用以下代码。

Dropzone.autoDiscover = false;

var myDropzone = new Dropzone(element, {
     url: "/upload.php",                        
     autoProcessQueue: false,
});

$('#imgsubbutt').click(function(){           
     myDropzone.processQueue();
});

您可以使用“发送时”事件发送额外数据。

myDropzone.on("sending", function(file, xhr, formData) {

  formData.append("text", "sample text");
});

或者您可以在放置后将文件保存在临时位置。然后像往常一样提交您的表格。在服务器端文件可以从临时位置移动到最终位置，然后删除临时位置文件。

Answer 2

编辑：

我要求你先下载 jQuery here。

然后，我们必须将其与您的dropzone.js 一起调用：

<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script> <!-- REPLACE NECESSARY FILE DEPENDING ON THE VERSION YOU HAVE DOWNLOADED -->
<script type="text/javascript" src="js/dropzone.js"></script>

您可以在表单内部或外部包含其他字段，这对于我们稍后将采用的路径并不重要。请注意，我们为您的其他输入字段添加了id 标签：

<form action="upload.php" class="dropzone" enctype="multipart/form-data">
    <input type="text" name="title" id="title" value="Title" />
    <textarea name="text" id="description"></textarea>
    <input type="text" name="email" value="Email" id="email" />
    <input type="submit" name="edit" alt="edit" value="Submit"/>
</form>

然后，让我们为您的 dropzone 和一个 Ajax 创建一个脚本，如果您尝试上传的文件满足您的 dropzone 的要求，它将运行：

$(document).ready(function(){

    $(".dz-default").hide(200); /* THIS WILL HIDE FIRST THE UPLOAD FIELD */

    function insert(filename){ /* CREATE A FUNCTION THAT WILL INSERT THE DATA */

        /* GET THE INPUT DATA OF THE USER */
        var title = $("#this").val(),
            desc = $("#description").val(),
            email = $("#email").val();

        $.ajax({ /* START AJAX */
            url: "upload.php", /* FILE TO BE SUBMITTED THE DATA */
            type: "POST", /* METHOD TO PASS THE DATA */
            data: {'title': title, 'desc': desc, 'email': email, 'filename': filename} /* DATA TO BE PASSED TO upload.php */
        });
    }

    $(document).on("change keyup", "input", function(){ /* IF USER IS TRYING TO PUT DATA TO THE TEXT FIELDS */

        /* GET ALL USER'S INPUT */
        var title = $("#this").val(),
            desc = $("#description").val(),
            email = $("#email").val();

        if(title != '' && desc != '' && email != ''){ /* IF ALL INPUT HAS BEEN FILLED */
            $(".dz-default").show(200); /* SHOW THE UPLOAD FIELD */
        } else {
            $(".dz-default").hide(200); /* HIDE THE UPLOAD FIELD */
        }
    });

    Dropzone.options.myAwesomeDropzone = { /* WHEN USER UPLOAD A FILE */
        paramName: "file", // The name that will be used to transfer the file
        maxFilesize: 2, // MB
        accept: function(file, done) {
            insert(file.name); /* CALL OUR FUNCTION THAT INSERTS INPUT DATA WITH THE FILE NAME AS OUR PARAMETER */
        }
    };

});

那么为你的upload.php：

if(!empty($_FILES)){ /* MOVE FILE TO YOUR PREFERRED DIRECTORY */

    $targetDir = "uploads/";
    $fileName = $_FILES['file']['name'];
    $targetFile = $targetDir.$fileName;

    move_uploaded_file($_FILES['file']['tmp_name'], $targetFile);

}

/* INSERT DATA TO YOUR DATABASE */
if(!empty($_POST["title"]) && !empty($_POST["desc"]) && !empty($_POST["email"]) && !empty($_POST["filename"])){

    /* USE AT LEAST REAL_ESCAPE_STRING BEFORE INSERTING THEM TO YOUR DATABASE */
    $title = $conn->real_escape_string($_POST["title"]);
    $desc = $conn->real_escape_string($_POST["desc"]);
    $email = $conn->real_escape_string($_POST["email"]);
    $filename = $conn->real_escape_string($_POST["filename"]);

    $conn->query("INSERT INTO files (title, description, email, file_name) VALUES('$title', '$desc', '$email', '$fileName')");

}

唯一的问题是用户在上传文件之前必须先输入他们的信息。通过首先隐藏上传字段然后只会显示填写完所有文本字段后。