Image Picker jquery插件：如何获取选中图片的img-src（多选案例）

Posted 2023-05-09

【中文标题】Image Picker jquery插件：如何获取选中图片的img-src（多选案例）

【英文标题】：Image Picker jquery plugin:How to get img-src of selected images(multiple selection case)

【发布时间】：2015-04-18 05:01:20

【问题描述】：

我正在使用这个 Image Picker jQuery 插件 (http://rvera.github.io/image-picker/) 并且想要获取所选图像的 img-src。

在一个选择案例中，我尝试了这个，一切正常。

$(".image-picker").imagepicker(

            clicked:function()
      alert($(this).find("option[value='" + $(this).val() + "']").data('img-src'));
  

        ); 

所以，如果我想获取所有被选中图像的 img-src（在多选情况下）并将所有这些图像收集到数组中。还有吗？

【参考方案1】：

    var req = $("div[class='thumbnail selected']").children('img');
    var imagessource = [];
    $(req).each(function (datakey, datavalue) 
        src =  $(datavalue).attr('src'); 
        imagessource.push(src);
      );
      console.log(imagessource);

获取一个包含所有选中图像的对象，然后迭代提取每个图像源

【参考方案2】：

您始终可以像这样访问您的多个列表：

$("*[multiple=multiple]").find("option:selected").each(function(index, item)
    console.log($(item).attr("data-img-src"));
);

当然，将“*[multiple=multiple]”选择器替换为您的元素标识符，因为这样您将从页面中获取所有多个列表。

如果你不想那样做，另一种方法是，因为图像选择器插件在包装你的图像的 div 上添加“选定”类，将使用它来获取所有选定的图像：

$(".image-picker").find(".selected img").each(function(index, item)
    console.log($(item).attr("src"));
);