jquery选择图像 [英] jquery select image

问题描述

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

I am looking to allow users to select a pre-uploaded image to a user generated web page.

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

I have a list of the available images, so I could easily do this with a select control, however, I'd really like to allow the users to select from a pop up of thumbnails, rather than text, then have that populate a text form element with the resulting file name. I'm hoping the end result will be like a calendar pop-up date selector.

我确信使用Jquery /其他javascript有一种简单的方法可以做到这一点。 。有没有人知道预制的小部件/这个例子，或者人们可以指出我从哪里开始的正确方向？我是Javascript的新手，但愿意花一些时间学习...

I'm sure there is a simple way to do this using Jquery / other javascript. Does anyone know of a pre built widget / example of this, or can people point me in the right direction of where to start? I'm pretty new to Javascript, but willing to invest some time in learning...

澄清：网格或缩略图列表是我理想的，但主要的是给用户一个图片的直观表示，而不是它的文件名...

Clarification: A grid or list of thumbnails is what I'm after ideally, but the main thing is to give the user a visual representation of the picture, rather than it's filename...

推荐答案

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

当您生成缩略图时，请将其添加到img标记：

and as you're generating your thumbnails, add this to the img tag:

onclick="javascript:fillBox(this);"

我没有测试任何这个，但它应该可以帮到你。

I haven't tested any of this, but it should get you most of the way there.

这篇关于jquery选择图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！