初始化后，向dropzone.js添加新的缩略图

Question

我有一个使用dropzone.js的网页。我的网页让人们可以选择他们的个人资料图片如果他们已经设置了它，我想展示他们的照片，但允许他们改变它。为了做到这一点，我使用了以下dropzone代码：

var currentPicture = null;
function removeCurrentPicture() {
  try {
    if (dropzone) {
      for (var i = 1; i < dropzone.files.length; i++) {
        dropzone.removeFile(dropzone.files[i-1]);
      }
    }
  } catch (ex1) {
    console.log(ex1);
  }

  return false;
}

function setThumbnailWidths() {
  var thumbnails = $("*[data-dz-thumbnail]");
  for (var i=0; i<thumbnails.length; i++) {
    $(thumbnails[i]).css('max-width', '150px');
  }
}


var pictureDropZone = new Dropzone("#myPicture", {
  url: "/profile/picture/",
  maxFilesize: 5,
  clickable: true,
  uploadMultiple: false,
  previewTemplate: previewTemplate,
  previewsContainer: "#previews",
  init: function () {
    dropzone = this;

    // add picture if it exists
    var pictureUrl = 'DYNAMICALLY POPULATED FROM SERVER';
    if (pictureUrl) {
      var pictureSize = // POPULATED FROM SERVER;
      var pictureFileName = // POPULATED FROM SERVER;
      var pictureMimeType = 'img/png';

      var currentPicture = { name: pictureFileName, size: pictureSize, type: pictureMimeType };
      this.addFile.call(this, currentPicture);
      this.options.thumbnail.call(this, currentPicture, pictureUrl);
      this.files.push(currentPicture);

      $('#picturePrompt').hide();
    }

     this.on('addedfile', function (file) {
       if (dropzone.files.length > 1) {
         removeCurrentPicture();
       }

       $('#picturePrompt').hide();
       $("#errorMessage").hide();
     });

     this.on('removedfile', function (file) {
       $('#picturePrompt').show();
     });

     this.on('success', function (file, res) {
       setThumbnailWidths();
     });

     this.on('error', function (e, m) {
       $("#previews").hide();
       $("#errorMessage").html('An unknown error has happened. Please try again.');
       $("#errorMessage").show();
     });
   }
 });

补充此dropzone的HTML如下所示：

<div id="myPicture" style="padding:40px; cursor:pointer;">
  <div id="picturePrompt">Drop a picture here or just click</div>
  <div id="errorMessage" class="error" style="display:none; margin-bottom:8px;"></div>

  <div class="files" id="previews">
    <div id="template" class="file-row">
      <ul class="list-inline">
        <li>
          <span class="preview" style="width:350px;"><img data-dz-thumbnail /></span>
          <p class="size" data-dz-size></p>
        </li>
        <li style="vertical-align:top;">
          <button data-dz-remove class="btn btn-danger" style="margin-top:8px;">
            <i class="glyphicon glyphicon-trash pull-left"></i>
            <span class="pull-left">Delete</span>
          </button>
        </li>
      </ul>
    </div>
  </div>
</div>

此代码有效，除非在页面加载时从服务器加载图片。如果设置了pictureUrl，则图片呈现正常。我可以＆＃34;删除＆＃34;它。但是，如果我尝试添加新图片，则不会显示新缩略图。文件的大小。但缩略图没有显示。

我做错了什么？