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

Question

I have this small problem with a website I'm designing. It's fairly over, but I think the jQuery is the problem here.

The code is as follows:

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

And the jQuery is the following, in the part of the document:

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

However, upon clicking the img, nothing happens, where a file upload dialog should pop up. Please, if you need any more information or something, let me know. If not, what could the problem be here? I'm using jQuery 1.8.0.

Answer 1

Using HTML5 label element:

<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

Works in Chrome, IE and Opera but not FF.

Browsers tend to limit what you can do with input type="file" . The label element redirects the focus to the input with the id property equal to its for property, so this is an workaround to trigger the invisible element.

---

Modern browsers have alleviated a good part of those restrictions though, so you can trigger the .click() without problem.

You may however, change the CSS hack to hide it without using display:none or visibility:hidden for back-compat with older browsers. Either

position:absolute; top:-100px;

Or

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

Can hide the element without using the display or visibility CSS properties.

Fiddle

---

Also, here's an workaround for the label element on FF, you can change the visibility:hidden by opacity:0 and:

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

Fiddle . But this should be unnecessary if the primary script works fine.