使用jQuery、HTML和CSS创建自定义文件上传


Creating a custom file upload with jQuery, HTML and CSS

我在设计一个网站时遇到了这个小问题。它已经结束了,但我认为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。

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

Fiddle

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

浏览器往往会限制您使用input type="file"所能做的事情。label元素将焦点重定向到id属性等于其for属性的输入,因此这是触发不可见元素的一种变通方法。


不过,现代浏览器在很大程度上减轻了这些限制,因此您可以毫无问题地触发.click()

然而,您可以更改CSS破解以隐藏它,而无需使用display:nonevisibility:hidden来与旧浏览器兼容。任一

position:absolute; top:-100px;

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

可以在不使用displayvisibility CSS属性的情况下隐藏元素。

Fiddle


此外,这里还有一个FF上标签元素的解决方法,您可以通过opacity:0和:更改visibility:hidden

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

小提琴。但是,如果主脚本运行良好,那么这应该是不必要的。