如何仅使用 jquery 和 ajax 在 dropify 中设置默认图像

Question

我正在使用 https://github.com/JeremyFagis/dropify 插件进行图像上传，我被困在编辑页面，因为我必须设置默认图像但无法这样做。我必须使用 jquery 和 ajax 来做到这一点。我尝试过 attr() 和设置 data-defalut-file() 但没有成功。另外，当我使用 data-defalut-file() 时，我可以在检查元素中看到我的图像，但在 UI 上看不到。请帮忙:)

我试过了：

  $("#thumbnails_4_5").attr(
    "data-default-file",
    s3BaseUrlVideo +
      "/" +
      bucketName +
      "/" +
      images_folder +
      "/" +
      define_grid +
      "/" +
      horizontal +
      "/" +
      item.grid.thumbnail_4_5
  );

和

$('.dropify').dropify({ 默认文件：名称图像， });

Answer 1

你可以使用这样的东西（使用 jQuery）：

$('#input').attr("data-default-file", "imagePath");
$('#input').dropify():

或者直接设置即可

<input type="file" id="input" class="dropify" data-default-file="imagePath" />

Answer 2

如果你想通过JS或JQuery代码更新dropify图像，你需要remove该元素，然后再次append并初始化它！ 像这样的：

                $('#imageInput , .dropify-wrapper').remove();
                
                html = `<input type="file" id="imageInput" class="dropify form-control" data-max-file-size="5M" id="imageInput" data-height="200" required=""
             data-default-file='your_url' />`;
                $('#imageInputContainer').append(html);
                $('#imageInput').dropify();

Answer 3

var _newImageLink = '';
var drEvent = $('#file').dropify(
{
    defaultFile: _newImageLink
});
drEvent = drEvent.data('dropify');
drEvent.resetPreview();
drEvent.clearElement();
drEvent.settings.defaultFile = _newImageLink;
drEvent.destroy();
drEvent.init();