时间戳

首页 > 解决方案 > 如何使图像成为可点击的输入

javascript - 如何使图像成为可点击的输入

问题描述

我想让一个图像可以点击，type=file 比如

 <label for="formFileSm" class="label_display form-label">avtar</label>

 <input class="width_input mx-auto form-control form-control-sm" id="formFileSm" type="file">

 <img src="photos/gamer.png" class="image_profile width_fix_35" alt="">

我试图隐藏输入并向 img 添加一个点击处理程序（但我没有成功）我将不胜感激你们的帮助

标签： javascripthtml

解决方案

添加一个

window.addEventListener('DOMContentLoaded', () => {
  const img = document.getElementById('image');
  const file = document.getElementById('file');
  
  img.addEventListener('click', (e) => {
    e.preventDefault();
    file.click();
  })
  
  // for getting the file event
  file.addEventListener('change', (e) => {
    // do whatever you want
    console.log('file selected', e.target.files[0]);
  });
})
<img width="150" src="http://via.placeholder.com/640x360" id="image" />
<input type="file" id="file" style="display: none;" />

图像上的单击事件侦听器，并在单击时触发文件输入的单击事件。尝试这个-

推荐阅读