Question

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

表单页面上的代码

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

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

编辑：

我要求您先下载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')");

}

~~这个唯一的问题是用户在上传文件之前必须首先提供他们的信息。~~首先隐藏上传字段然后只显示解决方案填写完所有文本字段后。

Answer 2

要避免在删除图像后立即上传图像，可以使用以下代码。

Dropzone.autoDiscover = false;

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

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

您可以使用＆＃34;发送＆＃34;发送额外数据事件

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

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

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

通过表单上传文本和图像

2 个答案:

编辑：