输入类型文件隐藏点击

时间:2016-01-09 05:30:56

标签: javascript jquery html

我正在尝试使用以下查询来修改此上传按钮。

HTML:

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

我尝试使用图片替换<input type="file">&#34;按钮&#34;。

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

正如您所看到的,我在这里使用ajax将图像上的点击重定向到文件。虽然看起来好像它在Safari等主流浏览器中不起作用。 另一方注意:我已经在我的网站上的许多页面添加了这个代码,所以有一个简单的解决方案,我只需要添加一些Javascript?感谢。

3 个答案:

答案 0 :(得分:3)

如果不必在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;">

答案 1 :(得分:1)

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

答案 2 :(得分:0)

试试这个:

$('#myfileid').click(function () {
    window.location="some/thing/url/here";
}