jQuery子文件上传点击

Question

我尝试运行代码及其工作

<input type="file" />
<div class="image">

</div>
$('.image').click(function() {

    $('input').trigger('click');
});

现在，我希望代码为

<div class="image">
<input type="file" />    
</div>
$('.image').click(function() {
    $(this).find('input').trigger('click');
});

并且，我不确定为什么这不起作用。

示例小提琴就在这里。 http://jsfiddle.net/CSvjw/1538/

Answer 1

问题是：

<强>解决方案：

＆＃13;

＆＃13;

$('.image').click(function(event) {
  if (!$(event.target).is('input')) {
    $(this).find('input').trigger('click');
  }
});

＆＃13;

input[type=file] {
  display: none;
  height: 0;
  width: 0;
}
.image {
  height: 100px;
  width: 100px;
  background-color: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="image">
  <input type="file" />
</div>

＆＃13;

＆＃13;

＆＃13;