输入类型文件隐藏点击

Input type file hidden click

本文关键字：隐藏 文件 类型 输入      更新时间：2023-09-26

我正试图使用以下查询来修改此上载按钮。

HTML:

 <input type="file" name="something" id="myfileid" style="display:none;">

我试着用一张图片来代替<input type="file">的"按钮"。

 <img src="some/thing/url/here" onclick="$('myfileid').click();">

正如您所看到的，在这里我使用ajax将点击图像重定向到文件。尽管它似乎在Safari等主流浏览器中不起作用。另一个附带说明：我已经在我的网站上的许多页面上添加了这段代码，所以有没有一个简单的解决方案，我只需要添加一些Javascript？谢谢

如果不需要在javascript中解决，您可以通过将图像包装在label for="myfileid"中来轻松实现这一点，就像这个一样

JS Fiddle

<label for="myfileid">
  <img src="//ninjaforms.com/wp-content/uploads/edd/2012/10/file-uploads1.png" width="250">
</label>
<input type="file" name="something" id="myfileid" style="display:none;">

<img src="some/thing/url/here" onclick="$('#myfileid').trigger('click'); return true;">
相关文章：