Question

我试图通过点击anchor标签来模拟输入标签上的点击，这样我就可以隐藏输入并将图像包装在锚标记内。

这可以使用jQuery触发器功能，但我不能使它只使用＆＃34; plain＆＃34;使用Javascript：

jQuery版本：

＆＃13;

let fake = $('.fake')
fake.click(function(e) {
  e.preventDefault();
  $('#user_avatar').trigger('click');
})

＆＃13;

#user_avatar { display: none; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="file" name="file_field" id="user_avatar">
<a href="#" class="fake">
  <img src="https://fthmb.tqn.com/65lNzIRNfZY4xY02D17b1RcGvso=/960x0/filters:no_upscale()/kitten-looking-at-camera-521981437-57d840213df78c583374be3b.jpg" width="320" height="240">
</a>

＆＃13;

使用new Event和dispatchEvent的JavaScript版本：

＆＃13;

let fake = document.querySelector('.fake');
fake.addEventListener('click', function(e) {
  e.preventDefault();
  console.log('testing');
  let clickEvent = new Event('click');
document.getElementById('user_avatar').dispatchEvent(clickEvent)
})

＆＃13;

#user_avatar { display: none; }

＆＃13;

<input type="file" name="file_field" id="user_avatar">
<a href="#" class="fake">
  <img src="https://fthmb.tqn.com/65lNzIRNfZY4xY02D17b1RcGvso=/960x0/filters:no_upscale()/kitten-looking-at-camera-521981437-57d840213df78c583374be3b.jpg" width="320" height="240">
</a>

＆＃13;

呈现console.log，但事件没有被调度，我做错了什么？

Answer 1

document.getElementById('user_avatar').click()将有效

let fake = document.querySelector('.fake');
fake.addEventListener('click', function(e) {
  e.preventDefault();
  document.getElementById('user_avatar').click()
})

#user_avatar {
  display: none;
}

<input type="file" name="file_field" id="user_avatar">
<a href="#" class="fake">
  <img src="https://fthmb.tqn.com/65lNzIRNfZY4xY02D17b1RcGvso=/960x0/filters:no_upscale()/kitten-looking-at-camera-521981437-57d840213df78c583374be3b.jpg" width="320" height="240">
</a>

Answer 2

使用：

document.getElementById('user_avatar').click();

经过测试，确实有效。

Answer 3

您根本不需要JavaScript来解决此问题。

只需通过设置其opacity:0使输入不可见，并将两个元素绝对置于公共父元素中，然后确保输入位于顶层，并且与其后面的图像大小相同。

＆＃13;

#user_avatar { opacity:0; position:absolute; z-index:9; width:320px; height:240px; }
img { position:absolute; z-index:-1; }

＆＃13;

<div>
  <input type="file" name="file_field" id="user_avatar">
  <img src="https://fthmb.tqn.com/65lNzIRNfZY4xY02D17b1RcGvso=/960x0/filters:no_upscale()/kitten-looking-at-camera-521981437-57d840213df78c583374be3b.jpg" width="320" height="240">
</div>

＆＃13;

在输入上模拟点击事件 - JavaScript

3 个答案: