創建與jQuery，HTML和CSS

自定義文件上傳我有這樣的小問題，一個網站我設計。它已經結束了，但我認爲jQuery是這裏的問題。創建與jQuery，HTML和CSS

的代碼如下：

<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。

來源

2012-08-23 Jose Salvatierra

您沒有設置「file_upload」的「點擊」動作。 –

@JohnnyMopp你知道文件輸入是如何工作的嗎？ – Matt

@JohnnyMopp是的，我相信你不必在使用jQuery時設置onclick。 –

使用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"做什麼。標籤元件重定向的焦點與所述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的標籤元素的解決方法，您可以通過opacity:0改變visibility:hidden和：

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

Fiddle。但是，如果主要腳本正常工作，這應該是不必要的。

來源

2012-08-23 17:37:57

這個工作！令人驚訝的是，你能解釋爲什麼它會這樣嗎？ –

哦，我看到：P你有任何建議，使其工作FF也？我認爲這可能對於許多用戶來說是很重要的;/ –

@jslvtr是啊，我想更多的hackish jQuery的，讓我們來看看，如果我在一兩分鐘，取得成功。 –

創建與jQuery，HTML和CSS

回答

相關問題