Dropzone并上传到多个文件夹答案

【问题标题】：Dropzone and upload to multiple foldersDropzone并上传到多个文件夹
【发布时间】：2014-05-26 10:20:37
【问题描述】：

您好，我正在寻找一种将文件上传到文件夹的方法。

我在网站上有一个放置区，可以放置所有文件然后上传。但我需要的是选择哪个文件到哪个文件夹。

我想将第三个按钮（选择选项）添加到上传它的文件夹。可能使用onChange 事件。

知道如何只为那个只有一个文件做这件事吗？

例子：

body.png 开始取消文件夹（图片） - 当我按下开始时，它将上传到图片文件夹

styles.css START CANCEL FOLDER (css) - 当我按下开始时，它将上传到 css 文件夹

上传脚本：

if ((($_FILES["file"]["type"] == "image/gif")
|| ($_FILES["file"]["type"] == "image/jpeg")
|| ($_FILES["file"]["type"] == "image/jpg")
|| ($_FILES["file"]["type"] == "image/pjpeg")
|| ($_FILES["file"]["type"] == "image/x-png")
|| ($_FILES["file"]["type"] == "image/png"))
&& ($_FILES["file"]["size"] < 2000000)
&& in_array($extension, $allowedExts)) {
  if ($_FILES["file"]["error"] > 0) {
    echo "Return Code: " . $_FILES["file"]["error"] . "<br>";
  } else {
    echo "Upload: " . $_FILES["file"]["name"] . "<br>";
    echo "Type: " . $_FILES["file"]["type"] . "<br>";
    echo "Size: " . ($_FILES["file"]["size"] / 1024) . " kB<br>";
    echo "Temp file: " . $_FILES["file"]["tmp_name"] . "<br>";
    if (file_exists("upload/" . $_FILES["file"]["name"])) {
      echo $_FILES["file"]["name"] . " already exists. ";
    } else {
      move_uploaded_file($_FILES["file"]["tmp_name"],
      "upload/" . $_FILES["file"]["name"]);
      echo "Stored in: " . "upload/" . $_FILES["file"]["name"];
    }
  }
} else {
  echo "Invalid file";
}
?>

Dropzone 脚本：

<script>
      var previewNode = document.querySelector("#template");
      previewNode.id = "";
      var previewTemplate = previewNode.parentNode.innerHTML;
      previewNode.parentNode.removeChild(previewNode);

      var myDropzone = new Dropzone(document.body, { // Make the whole body a dropzone
        url: "upload.php", // Set the url
        thumbnailWidth: 80,
        thumbnailHeight: 80,
        parallelUploads: 20,
        previewTemplate: previewTemplate,
        autoQueue: false, // Make sure the files aren't queued until manually added
        previewsContainer: "#previews", // Define the container to display the previews
        clickable: ".fileinput-button" // Define the element that should be used as click trigger to select files.
      });

      myDropzone.on("addedfile", function(file) {
        // Hookup the start button
        file.previewElement.querySelector(".start").onclick = function() { myDropzone.enqueueFile(file); };
      });

      // Update the total progress bar
      myDropzone.on("totaluploadprogress", function(progress) {
        document.querySelector("#total-progress .progress-bar").style.width = progress + "%";
      });

      myDropzone.on("sending", function(file) {
        // Show the total progress bar when upload starts
        document.querySelector("#total-progress").style.opacity = "1";
        // And disable the start button
        file.previewElement.querySelector(".start").setAttribute("disabled", "disabled");
      });

      // Hide the total progress bar when nothing's uploading anymore
      myDropzone.on("queuecomplete", function(progress) {
        document.querySelector("#total-progress").style.opacity = "0";
      });

      // Setup the buttons for all transfers
      // The "add files" button doesn't need to be setup because the config
      // `clickable` has already been specified.
      document.querySelector("#actions .start").onclick = function() {
        myDropzone.enqueueFiles(myDropzone.getFilesWithStatus(Dropzone.ADDED));
      };
      document.querySelector("#actions .cancel").onclick = function() {
        myDropzone.removeAllFiles(true);
      };
    </script>

和身体构造：

<body>

  <div class="container" id="container">
    <h1>Dropzone.js</h1>
    <br>
    <br>
    <div id="actions" class="row">

      <div class="col-lg-7">
        <!-- The fileinput-button span is used to style the file input field as button -->
        <span class="btn btn-success fileinput-button">
            <i class="glyphicon glyphicon-plus"></i>
            <span>Add files...</span>
        </span>
        <button type="submit" class="btn btn-primary start">
            <i class="glyphicon glyphicon-upload"></i>
            <span>Start upload</span>
        </button>
        <button type="reset" class="btn btn-warning cancel">
            <i class="glyphicon glyphicon-ban-circle"></i>
            <span>Cancel upload</span>
        </button>

      </div>

      <div class="col-lg-5">
        <!-- The global file processing state -->
        <span class="fileupload-process">
          <div id="total-progress" class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
            <div class="progress-bar progress-bar-success" style="width:0%;" data-dz-uploadprogress></div>
          </div>
        </span>
      </div>

    </div>

    <div class="table table-striped" class="files" id="previews">

      <div id="template" class="file-row">
        <!-- This is used as the file preview template -->
        <div>
            <span class="preview"><img data-dz-thumbnail /></span>
        </div>
        <div>
            <p class="name" data-dz-name></p>
            <strong class="error text-danger" data-dz-errormessage></strong>
        </div>
        <div>
            <p class="size" data-dz-size></p>
            <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
              <div class="progress-bar progress-bar-success" style="width:0%;" data-dz-uploadprogress></div>
            </div>
        </div>
        <div>
          <button class="btn btn-primary start">
              <i class="glyphicon glyphicon-upload"></i>
              <span>Start</span>
          </button>
          <button data-dz-remove class="btn btn-warning cancel">
              <i class="glyphicon glyphicon-ban-circle"></i>
              <span>Cancel</span>
          </button>
          <button data-dz-remove class="btn btn-danger delete">
            <i class="glyphicon glyphicon-trash"></i>
            <span>Delete</span>
          </button>
        </div>
      </div>

    </div>

【问题讨论】：

标签： javascript php html

【解决方案1】：

（仅概念证明，需要大量改进、验证和安全措施。）

这会设置一个拖放区，要求在开始上传之前单击“提交所有文件”按钮。将文件添加到 dropzone 时，将加载带有文件夹名称的选择列表以及文件预览。为每个上传项目选择一个文件夹名称，然后单击提交按钮。文件被上传，每个文件都被定向到相应文件夹选择列表指定的文件夹中。

form.html

<button id="submit-all">Submit all files</button>
<form action="upload.php" class="dropzone" id="my-dropzone"></form>

<script>

Dropzone.options.myDropzone = {

  // Prevents Dropzone from uploading dropped files immediately
  autoProcessQueue: false,

  init: function() {
    var submitButton = document.querySelector("#submit-all"),
        myDropzone = this; // closure

    submitButton.addEventListener("click", function() {
      myDropzone.processQueue(); // Tell Dropzone to process all queued files
    });

    this.on('addedfile', function(file) {
        var select = document.createElement('select');
        select.setAttribute('name', 'folder[' + file.name + ']');

        var option;
        option = document.createElement('option');
        option.innerHTML = 'images';
        select.appendChild(option);

        option = document.createElement('option');
        option.innerHTML = 'css';
        select.appendChild(option);

        document.forms[0].appendChild(select);
    });
  }
};

</script>

上传.php

<?php

if (!empty($_FILES)) {
    $filename = $_FILES['file']['name'];
    $fp = ( isset($_POST['folder'][$filename]) )? $_POST['folder'][$filename]: '';
    $folder = ( 'images' == $fp || 'css' == $fp )? $fp: 'upload';

    move_uploaded_file(
        $_FILES['file']['tmp_name'],
        dirname( __FILE__ ) . '/' . $folder . '/' . $filename
    );
}
else { echo 'error: no file'; }

?>

附注：很明显，dropzone 会为每个上传的文件执行 XHR 操作。因此，对于每个上传的文件，表单中的每个元素（包括每个选择列表）都会附加到 XHR 的 formData 对象，从而导致冗余。

【讨论】：