jQuery选择图像答案

【问题标题】：jquery select imagejQuery选择图像
【发布时间】：2010-10-06 13:16:23
【问题描述】：

我希望允许用户选择预先上传的图像到用户生成的网页。

我有一个可用图像列表，因此我可以使用选择控件轻松完成此操作，但是，我真的希望允许用户从缩略图弹出窗口中进行选择，而不是从文本中进行选择，然后使用使用生成的文件名填充文本表单元素。我希望最终结果会像一个日历弹出日期选择器。

我确信有一种简单的方法可以使用 Jquery / 其他 javascript 来做到这一点。有谁知道一个预先构建的小部件/示例，或者人们可以指出我从哪里开始的正确方向？我对 Javascript 很陌生，但愿意花一些时间学习...

澄清：网格或缩略图列表是我理想的目标，但主要是为用户提供图片的视觉表示，而不是文件名......

【问题讨论】：

您是否正在尝试创建缩略图网格/列表？还是让用户从
我认为他想要的东西看起来像
顺便说一句，这是一个很好的问题，也是我有兴趣看到的。
如果你已经解决了这个问题，你能写下你如何解决它的细节吗，我对类似的东西很感兴趣。 tnkx

标签： javascript jquery user-interface web-applications

【解决方案1】：

我找到了这个名为 "Select Box Factory 2.0" 的 jQuery 插件

打开“其他功能：图像”手风琴，我认为这或多或少是您想要的。

或者，您可以执行以下操作：

<select id='images'>
    <option value='tiger.jpg'>Tiger</option>
    <option value='owl.jpg'>Owl</option>
    <option value='bear.jpg'>Bear</option>
</select>
<div id='preview'></div>

然后是这样的 jQuery 代码：

$('#images').change(function() {
    var image = $(this).val();
    var img = $('<img/>').attr('src', image);
    $('#preview').html(img);
});

祝你好运。

【讨论】：

【解决方案2】：

function fillBox(myImg){
    imageSource = myImg.src;
    imgName = // do some stuff to get only the filename, minus the dirs
    document.getElementById("yourTextBox").value = imgName;
}

在生成缩略图时，将其添加到 img 标签：

onclick="javascript:fillBox(this);"

我还没有测试过这些，但它应该能让你大部分时间到达那里。

【讨论】：

谢谢。我最终将它与 Paulo 的答案结合使用，帮了我一个忙。

【解决方案3】：

jQuery custom select 给我留下了深刻的印象。不过，在填充字段时似乎有点迟钝。

【讨论】：