2

我正在设计的网站有这个小问题。它已经结束了，但我认为 jQuery 是这里的问题。

代码如下：

<img src="files/register_page/upload_photo/body.png" id="upload">
<input type="file" name="file_upload" id="file_upload" style="visibility:hidden;">

在文档的一部分中，jQuery 如下：

$(document).ready( function(){
      $("#upload").click( function(){
          $('#file_upload').click();
      });
    });

但是，单击 img 后，什么也没有发生，应该会弹出一个文件上传对话框。请，如果您需要更多信息或其他信息，请告诉我。如果没有，问题可能出在哪里？我正在使用 jQuery 1.8.0。

4

1 回答 1

5

使用 HTML5标签元素：

<label for="file_upload"><img src="files/register_page/upload_photo/body.png" id="upload"></label>
<input type="file" name="file_upload" id="file_upload" style="visibility:hidden;">

小提琴

适用于 Chrome、IE 和 Opera，但不适用于 FF。

浏览器往往会限制您可以使用input type="file". label 元素将焦点重定向到 id 属性等于其for属性的输入，因此这是触发不可见元素的解决方法。

但是，现代浏览器已经减轻了这些限制的很大一部分，因此您可以.click()毫无问题地触发。

但是，您可以更改 CSS hack 以在不使用旧浏览器的情况下隐藏它display:none或visibility:hidden与旧浏览器向后兼容。任何一个

position:absolute; top:-100px;

或者

opacity:0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
width:0; height:0;

可以在不使用display或visibilityCSS 属性的情况下隐藏元素。

小提琴

此外，这是 FF 上标签元素的解决方法，您可以更改visibility:hiddenbyopacity:0和：

$('#file_upload').focus(function() {
    $(this).click();
});

小提琴。但如果主脚本工作正常，这应该是不必要的。

于 2012-08-23T17:37:57.170 回答