我需要在缩略图之外显示文件名

Question

我需要在缩略图之外的底部显示文件名。这是我的代码：

<div class="dropzone" id="dropzoneFrom">
</div>
<div id="preview">
</div>

<script>
Dropzone.options.myAwesomeDropzone = {

    init: function() {

        this.on('addedfile', function(file){

            var preview = document.getElementsByClassName('dz-preview');
            preview = preview[preview.length - 1];

            var imageName = document.createElement('span');
            imageName.innerHTML = file.name;

            preview.insertBefore(imageName, preview.firstChild);

        });
    }
};
</script>

这行不通。

Answer 1

Dropzone.options.DropZoneFiddle = {
  url: this.location,
  paramName: "file", //the parameter name containing the uploaded file
  clickable: true,
  maxFilesize: 1, //in mb
  uploadMultiple: true, 
  maxFiles: 10, // allowing any more than this will stress a basic php/mysql stack
  addRemoveLinks: true,
  acceptedFiles: '.png,.jpg', //allowed filetypes
  dictDefaultMessage: "Upload your files here", //override the default text
  init: function() {
    this.on("sending", function(file, xhr, formData) {
      formData.append("step", "upload"); // Append all the additional input data of your form here!
      formData.append("id", "1"); // Append all the additional input data of your form here!
    });
    this.on("success", function(file, responseText) {
      //auto remove buttons after upload
      $("#div-files").html(responseText);
      var _this = this;
      _this.removeFile(file);
    });
  }
};

.dropzone {
  text-align: center;
  font-size: 18px;
}

.glyphicon-download {
  font-size: 1.5em;
}

#DropZoneFiddle {
  cursor: pointer;
  border: 1px solid #000;
  padding: 30px 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/dropzone.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/basic.css" rel="stylesheet"/>

<form action="" class="dropzone" id="DropZoneFiddle"><span class="glyphicon glyphicon-download">

  </span>
  <br/>
</form>

Reference

我需要在缩略图之外显示文件名

I need to display the file name outside of the thumbnail

javascript

dropzone.js