Question

我正在设计的网站存在这个小问题。它已经结束了，但我认为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。

Answer 1

使用HTML5 label元素：

<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;">

Fiddle

适用于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或visibility CSS属性的情况下隐藏元素。

Fiddle

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

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

Fiddle。但如果主脚本运行正常，这应该是不必要的。

使用jQuery，HTML和CSS创建自定义文件上载

1 个答案: