javascript - How to set default image in dropify using jquery and ajax only - Stack Overflow

admin管理员组

文章数量:1324807

I am using plugin for image upload and I am stuck at Edit page since I have to set default image but unable to do so.I have to do it using jquery and ajax. I have tried attr() and setting data-defalut-file() but no success. Also when i use data-defalut-file() i can see my image in inspect element but not on UI. Please help :)

I tried :

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

and

$('.dropify').dropify({ defaultFile: nameImage , });

I am using https://github./JeremyFagis/dropify plugin for image upload and I am stuck at Edit page since I have to set default image but unable to do so.I have to do it using jquery and ajax. I have tried attr() and setting data-defalut-file() but no success. Also when i use data-defalut-file() i can see my image in inspect element but not on UI. Please help :)

I tried :

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

and

$('.dropify').dropify({ defaultFile: nameImage , });

• javascript
• jquery
• ajax
• dropify

Share Improve this question Follow asked May 13, 2019 at 5:59 AKSHAY SALEKARAKSHAY SALEKAR 8611 gold badge11 silver badge1010 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

You cab use something like this(Using jQuery):

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

Or you can set it directly

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

Below code is solution for setting dynamic "data-default-file" on dropify.

// Define your new default image link
var newImageLink = 'https://upload.wikimedia/wikipedia/mons/1/13/Googlelogo_color_272x92dp.png';

// Get dropify instance
var myDropify = $("#yourDropifyInput").data('dropify');

// Reset current preview
myDropify.resetPreview();
myDropify.clearElement();

// Set new default file and re-init the dropify element
myDropify.settings.defaultFile = newImageLink;
myDropify.destroy();
myDropify.init();

If you want to update dropify image by JS or JQuery code, you need to remove the element and then append and initilize it again! something like this one :

                $('#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();

本文标签： javascriptHow to set default image in dropify using jquery and ajax onlyStack Overflow