Dropzonejs：使用 Bootstrap 主题上传多个文件

Question

我正在尝试在本地主机上实现此处显示的示例：https://gist.github.com/rnjailamba/2363bd30093ac526138e，这是我目前拥有的代码：

// Get the template HTML and remove it from the doumenthe template HTML and remove it from the doument
 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: window.location.href + "uploads", // Set the url
  thumbnailWidth: 80,
  thumbnailHeight: 80,
  parallelUploads: 20,
  previewTemplate: previewTemplate,
  maxFilesize: 2,
  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);
 };

html, body {
  height: 100%;
  }
  #actions {
  margin: 2em 0;
  }
  /* Mimic table appearance */
  div.table {
  display: table;
  }
  div.table .file-row {
  display: table-row;
  }
  div.table .file-row > div {
  display: table-cell;
  vertical-align: top;
  border-top: 1px solid #ddd;
  padding: 8px;
  }
  div.table .file-row:nth-child(odd) {
  background: #f9f9f9;
  }
  /* The total progress gets shown by event listeners */
  #total-progress {
  opacity: 0;
  transition: opacity 0.3s linear;
  }
  /* Hide the progress bar when finished */
  #previews .file-row.dz-success .progress {
  opacity: 0;
  transition: opacity 0.3s linear;
  }
  /* Hide the delete button initially */
  #previews .file-row .delete {
  display: none;
  }
  /* Hide the start and cancel buttons and show the delete button */
  #previews .file-row.dz-success .start,
  #previews .file-row.dz-success .cancel {
  display: none;
  }
  #previews .file-row.dz-success .delete {
  display: block;
  }

<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/5.2.0/min/dropzone.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.2.0/min/dropzone.min.css" />


<div class="container" id="container">
  <h1>Dropzone.js</h1>
  <h2 class="lead">Configuration Demo</h2>

  <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 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>
    </div>

当我 select 文件并单击开始时，动画开始上传，但动画完成后上传文件夹为空。没有可见的错误，控制台是空的。当我检查 Chrome 开发人员工具 > 网络选项卡时 - 我得到的响应是这样的：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<html>
 <head>
  <title>Index of /dropzonejs/uploads</title>
 </head>
 <body>
<h1>Index of /dropzonejs/uploads</h1>
  <table>
   <tr><th valign="top"><img src="/icons/blank.gif" alt="[ICO]"></th><th><a href="?C=N;O=D">Name</a></th><th><a href="?C=M;O=A">Last modified</a></th><th><a href="?C=S;O=A">Size</a></th><th><a href="?C=D;O=A">Description</a></th></tr>
   <tr><th colspan="5"><hr></th></tr>
<tr><td valign="top"><img src="/icons/back.gif" alt="[PARENTDIR]"></td><td><a href="/dropzonejs/">Parent Directory</a>       </td><td>&nbsp;</td><td align="right">  - </td><td>&nbsp;</td></tr>
   <tr><th colspan="5"><hr></th></tr>
</table>
<address>Apache/2.4.23 (Win64) PHP/5.6.25 Server at localhost Port 80</address>
</body></html>

知道如何解决这个问题吗？

Answer 1

您的问题在这里：

url: window.location.href + "uploads"

url 选项应该是处理文件上传的服务器端脚本的路径。现在您正指向您工作区中的一个目录。

Dropzonejs：使用 Bootstrap 主题上传多个文件

Dropzonejs: Multiple file upload with Bootstrap theming

jquery

twitter-bootstrap

dropzone.js