将范式与 Dropzone 相结合答案

【问题标题】：Combine normal form with Dropzone将范式与 Dropzone 相结合
【发布时间】：2014-01-26 05:02:06
【问题描述】：

我正在使用 dropzone.js 创建一个拖放区表单。我首先将表单设置为自动上传文件这工作正常，但我调整了表单仅在用户提交数据时才工作，我添加了名为 custom_dropzone.js 的文件并且表单似乎工作但文件从未上传到文件夹。

HTML 代码 (index.php)

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<head>   
<link href="css/dropzone.css" type="text/css" rel="stylesheet" />
<script src="dropzone.min.js"></script> 
<script src="custom_dropzone.js"></script>

 <!-- Now setup your input fields -->
 <input type="email" name="username" />
 <input type="password" name="password" />

 <button type="submit">Submit data and files!</button>
</form>
</body>
</html>

上传.php

<?php
$ds          = DIRECTORY_SEPARATOR;  //1

$storeFolder = '../upload_test/uploads';   //2

if (!empty($_FILES)) {


 $tempFile = $_FILES['file']['tmp_name'];          //3             

 $targetPath = dirname( __FILE__ ) . $ds. $storeFolder . $ds;  //4

 $targetFile =  $targetPath. $_FILES['file']['name'];  //5


$allowed =  array('gif','png' ,'jpg');
$filename = $_FILES['file']['name'];
$ext = pathinfo($filename, PATHINFO_EXTENSION);
if(!in_array($ext,$allowed) ) {
echo 'error';
}

move_uploaded_file($tempFile,$targetFile); //6

}
?>

新的 JS custom.dropzone.js 似乎破坏了 upload.php 功能

Dropzone.options.myAwesomeDropzone = { // The camelized version of the ID of the form       element

  // The configuration we've talked about above
  autoProcessQueue: false,
  uploadMultiple: true,
  parallelUploads: 3,
  maxFiles: 3,
  previewsContainer: ".dropzone-previews",

  accept: function(file, done) {
    console.log("uploaded");
    done();
   },

  init: function() {
  this.on("maxfilesexceeded", function(file){
    alert("No more files please!");
  });
},

// The setting up of the dropzone
init: function() {
  var myDropzone = this;

  // First change the button to actually tell Dropzone to process the queue.
  this.element.querySelector("button[type=submit]").addEventListener("click",   function(e) {
    // Make sure that the form isn't actually being sent.
    e.preventDefault();
    e.stopPropagation();
    myDropzone.processQueue();
   });

   // Listen to the sendingmultiple event. In this case, it's the sendingmultiple event instead
   // of the sending event because uploadMultiple is set to true.
   this.on("sendingmultiple", function() {
  // Gets triggered when the form is actually being sent.
  // Hide the success button or the complete form.
   });
   this.on("successmultiple", function(files, response) {
  // Gets triggered when the files have successfully been sent.
  // Redirect user or notify of success.
  });
  this.on("errormultiple", function(files, response) {
  // Gets triggered when there was an error sending the files.
  // Maybe show form again, and notify user of error
  });
 }

}

感谢您的帮助。我只需要上传文件，其他一切似乎都可以正常工作

【问题讨论】：

标签： php forms upload dropzone.js

【解决方案1】：

您忘记将enctype='multipart/form-data' 作为属性添加到您的<form>，并将方法类型添加为POST。

像这样添加..

 <form id="my-awesome-dropzone" method='post' class="dropzone" action="upload.php" enctype='multipart/form-data'>

【讨论】：

我试过了，虽然我同意你是正确的，但文件仍然没有上传。感谢任何其他想法
在您的upload.php 上尝试var_dump($_POST)，然后看看有什么问题。
我之前和现在都试过了。它不返回任何内容，就好像完全忽略了 upload.php 文件一样。我只是尝试使用绝对路径链接上传文件夹和 action="... 但这没有帮助。似乎如果我添加自定义 js php 函数会中止

【解决方案2】：

使用 dropzone 似乎您不需要方法='发布' enctype='多部分/表单数据' 就像 Shankar 提到的那样……但谢谢你

我通过从 custom_dropzone.js 中注释掉下面的 js 行解决了这个问题
//uploadMultiple: true,

【讨论】：