0

有没有办法做到这一点？我有几个图像预览，我想单击缩略图并选择图像，而不是使用名为“选择文件”的按钮。

有没有办法在<input type="file" />缩略图中添加一个并实现这一点？

我正在关注这个当前的片段：

<div class="fileupload fileupload-new" data-provides="fileupload">
  <div class="fileupload-new thumbnail" style="width: 200px; height: 150px;"><img src="http://www.placehold.it/200x150/EFEFEF/AAAAAA&text=no+image" /></div>
  <div class="fileupload-preview fileupload-exists thumbnail" style="max-width: 200px; max-height: 150px; line-height: 20px;"></div>
  <div>
    <span class="btn btn-file"><span class="fileupload-new">Select image</span><span class="fileupload-exists">Change</span><input type="file" /></span>
    <a href="#" class="btn fileupload-exists" data-dismiss="fileupload">Remove</a>
  </div>
</div>
4

1 回答 1

1

一种方法是这样的。首先创建一个隐藏的ul来累积所有选择的文件和一个隐藏的输入文件元素

HTML 

<ul class="hiddenItem">

</ul>

<input type="file" class="hiddenItem" id="filechoose" />

CSS

.hiddenItem{
    display: none;
}

然后像这样使用jquery

$(function(){
    $(".clickable").click(function(){
      $("#filechoose").trigger('click');
    });
});

这将打开选择文件对话框。您必须获取文件并将其添加到 ul.xml 中。之后，当您想将文件传递给服务器脚本时，只需传递 ul。

小提琴

于 2013-08-12T15:18:52.583 回答