Question

我的表格很长。我不会在这里发布，因为它不是英文版。

表单元素如下所示：

<form action="/ads/new" method="post" enctype="multipart/form-data">

如果我添加class="dropzone"，那么整个表单将成为拖放图像上传的框。此外，我的<input name="file" type="file" />仍具有基本外观和功能。我想在表单中放置Dropzone图像上传器“盒子” - 这可能吗？如果是的话，我怎么能这样做呢？

更新：

我终于有了dropzone，但上传的文件看起来很奇怪。

Answer 1

您可以将dropzone类用于div

 <form action="upload.php" enctype="multipart/form-data" method="POST">
    <input type="text" id ="firstname" name ="firstname" />
    <input type="text" id ="lastname" name ="lastname" />
    <div class="dropzone" id="myDropzone"></div>
    <button type="submit" id="submit-all"> upload </button>
</form>

在js中你可以

Dropzone.options.myDropzone= {
    url: 'upload.php',
    autoProcessQueue: false,
    uploadMultiple: true,
    parallelUploads: 5,
    maxFiles: 5,
    maxFilesize: 1,
    acceptedFiles: 'image/*',
    addRemoveLinks: true,
    init: function() {
        dzClosure = this; // Makes sure that 'this' is understood inside the functions below.

        // for Dropzone to process the queue (instead of default form behavior):
        document.getElementById("submit-all").addEventListener("click", function(e) {
            // Make sure that the form isn't actually being sent.
            e.preventDefault();
            e.stopPropagation();
            dzClosure.processQueue();
        });

        //send all the form data along with the files:
        this.on("sendingmultiple", function(data, xhr, formData) {
            formData.append("firstname", jQuery("#firstname").val());
            formData.append("lastname", jQuery("#lastname").val());
        });
    }
}

价： Integrating dropzone.js into existing html form with other fields

Answer 2

＆＃13;

Dropzone.autoDiscover = false;
	jQuery(document).ready(function() {

	  $("div#my-awesome-dropzone").dropzone({
	    url: "/file/post"
	  });

	});

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.0.1/dropzone.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.0.1/min/basic.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.0.1/dropzone.js"></script>


<form action="" method="POST" class="form-horizontal" role="form">
  <div class="form-group"></div>

  <label for="name">Name :</label>
  <input type="text" name="name" id="input-title" class="form-control">

<br><br>

  <label for="description">Email:</label>
  <input type="text" name="description" id="input-description" class="form-control">
<br><br>
 <label for="File">File: </label>
 <br><br>
  <div class="dropzone dropzone-previews" id="my-awesome-dropzone"></div>

<br><br>

  <div class="form-group">
    <div class="col-sm-10 col-sm-offset-2">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </div>
  
</form>

＆＃13;

如果需要

，使用php插入数据库更新代码

<link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.0.1/dropzone.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.0.1/min/basic.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.0.1/dropzone.js"></script>


<form action="save2.php" method="POST" class="form-horizontal" role="form">
  <div class="form-group"></div>

  <label for="name">Name :</label>
  <input type="text" name="name" id="input-title" class="form-control">

<br><br>

  <label for="description">Email:</label>
  <input type="text" name="description" id="input-description" class="form-control">
<br><br>
 <label for="File">File: </label>
 <br><br>
  <div class="dropzone dropzone-previews" name="File" id="my-awesome-dropzone"></div>

<br><br>

  <div class="form-group">
    <div class="col-sm-10 col-sm-offset-2">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </div>

</form>


 <script type="text/javascript">

Dropzone.autoDiscover = false;
  jQuery(document).ready(function() {

    $("div#my-awesome-dropzone").dropzone({
      url: "/file/post"
    });

  });


 </script>


<!-- Save Data using PHP -->

 <?php
if( isset($_POST['submit']) && isset($_POST['name']) && isset($_POST['email']) && !empty($_FILES)){

  $dbHost = 'localhost';
  $dbUsername = 'root';
  $dbPassword = '';
  $dbName = 'yourdbname';
  //connect with the database
  $conn = new mysqli($dbHost, $dbUsername, $dbPassword, $dbName);
  if($mysqli->connect_errno){

    echo "Failed to connect to MySQL: (" . $mysqli->connect_errno . ") " . $mysqli->connect_error;
  }


  $name = $_POST['name'];
  $email = $_POST['email'];

  $targetDir = "uploads/";
  $fileName = $_FILES['file']['name'];
  $targetFile = $targetDir.$fileName;
  if(move_uploaded_file($_FILES['file']['tmp_name'],$targetFile)){
    //insert file information into db table
    $conn->query("INSERT INTO tbl_name (name,email,file_name, uploaded) VALUES('".$name."','".$email."','".$fileName."','".date("Y-m-d H:i:s")."')");
  }

}
else{

$error = "Fill All Details First !!";

if ( isset($_POST['submit']) && isset($error)) {  echo $error;  }

}
?>

使用Dropzone图像上传器作为长格式的一个项目

2 个答案:

如果需要