Kích hoạt nhấp chuột với jquery trên thẻ đầu vào bị ẩn

Question

Tôi đang thử nghiệm ý tưởng này bằng cách sử dụng div trên đỉnh của hình <input type="file" /> ẩn để tôi có thể tạo nút tải lên tệp ưa thích. Tôi đã thấy một số mã xung quanh nhưng hơi phức tạp. Tôi nghĩ đến việc cố gắng ý tưởng này của việc sử dụng jQuery để kích hoạt các nhấp chuột của thẻ đầu vào từ container div

Html:

<div id="container">&nbsp;Click Me!&nbsp; 
    <input type="file" id="file" /> 
</div> 

Javascript:

$(document).ready(function() { 
    $('#container').click(function() { 
     $('#file')[0].click(); 
    }) 
}); 

Mặc dù mã chạy OK trên Chrome và IE, nó không chạy trên Safari và nó có một vấn đề buồn cười với Firefox: nó kích hoạt nhấp chuột hai lần! Bất kỳ ý tưởng tại sao điều này là như vậy? jQuery được cho là nền tảng chéo và tôi bối rối. Đây là fiddle

http://jsfiddle.net/kostasd/C4sCs/1/

Cảm ơn trước sự giúp đỡ nào!

Kostas

Answer 1

Các giải pháp có thể khác nhau mà tôi đã cố gắng rất

• Sử dụng Visiblity: hidden; chiều rộng: 1px; cho phần tử Nhập tệp.

Các jsfiddle cho nó là như sau http://jsfiddle.net/C4sCs/36/

• Chỉ sử dụng Css để gọi bấm vào tập tin đầu vào và không sử dụng jquery ở tất cả

  #container { 
  border:1px solid #b0b0b0; 
  display: inline-block; 
  position:relative; 
  overflow:hidden; 
  cursor:pointer; 
  } 
  #file { 
  position:absolute; 
  top:0; 
  opacity:0; 
  display:block; 
  } 
  

http://jsfiddle.net/C4sCs/42/