Question

在this教程之后，我已经设法在初始化时将服务器文件夹中已存在的文件列表。我按照here解释使用引导程序主题，但图像列出了完整大小，忽略了缩略图大小参数。

屏幕截图： screenshot

JS ：

    // DROPZONE
    Dropzone.autoDiscover = false;
    // 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("div#previews", { // Make the whole body a dropzone
        url: "allegati.php", // Set the url
        thumbnailWidth: 80,
        thumbnailHeight: 80,
        parallelUploads: 20,
        createImageThumbnails: true,
        previewTemplate: previewTemplate,
        autoQueue: true, // 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.
        init: function() {
            thisDropzone = this;
            $.get('allegati.php', function(data) {
                if(data) {
                    $.each(data, function(key,value) {
                        var mockFile = {name: value.name, size: value.size};
                        thisDropzone.options.addedfile.call(thisDropzone, mockFile);
                        thisDropzone.options.thumbnail.call(thisDropzone, mockFile, "uploads/"+value.name);
                        thisDropzone.options.complete.call(thisDropzone, mockFile);
                        thisDropzone.options.processing.call(thisDropzone, mockFile);
                        thisDropzone.options.success.call(thisDropzone, mockFile);
                    });
                }
            });
        },
        removedfile: function(file) {
             var name = file.name;  
             $.ajax({
                type: 'POST',
                url: 'allegati.php?delete=true?XDEBUG_SESSION_START',
                data: "fileId="+name,
                dataType: 'html'
            });
            var _ref;
            $('form input').filter(function(){return this.value==name}).remove();
            return (_ref = file.previewElement) != null ? _ref.parentNode.removeChild(file.previewElement) : void 0;
        },

    });

    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 ：

    <div id="actions" class="row">
    <style>
        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;
        }


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



        <!-- HTML heavily inspired by http://blueimp.github.io/jQuery-File-Upload/ -->
        <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>                              
</div>

如何设置加载的文件大小？谢谢亚历

Answer 1

在缩略图配置中使用相同值的此样式

.dropzone .dz-preview .dz-image {
      width: 80px;
      height: 80px;
    }

Dropzone.js现有文件的缩略图大小

1 个答案: