如何通過點擊文本來顯示文件瀏覽器，並在鼠標懸停時將鼠標光標更改爲指針

我試圖在用戶單擊頁面上的鏈接時顯示文件選擇器。我查了一下，但還沒有找到完整的解決方案。如何通過點擊文本來顯示文件瀏覽器，並在鼠標懸停時將鼠標光標更改爲指針

我已經排除將監聽器綁定到我的鏈接上的單擊事件並模擬我窗體的文件字段上的單擊事件，因爲我讀過Safari不支持以編程方式單擊輸入[type = file]。

目前我使用的方法是將文件字段的不透明度設置爲0，絕對位置位於鏈接頂部，有效攔截鏈接上的任何點擊。問題在於，我無法找到一種方法來更改用戶的光標，因爲它們被文件輸入遮擋，因爲它不允許這樣的樣式。我給所有直接父元素的CSS樣式光標：指針，但仍然沒有運氣。

有沒有人有一個不同的方法，我可以採取的想法，讓光標更改爲我的鏈接懸停指針？我最好的選擇是在http://www.uploadify.com/這樣的事情上做些什麼？

編輯

要解釋好一點，我有我的頁面上此文件輸入：

<div class="logo_file"> 
    <input id="logo_file_field" type="file"> 
</div>

有了這個CSS：

.logo_file { 
    position: absolute; /* this element's parent has position: relative */ 
    top: -65px; 
    left: 0; 
    width: 175px; 
    overflow: hidden; 
    cursor: pointer; 
} 
input#logo_file_field { 
    opacity: 0; 
    -moz-opacity: 0; 
    filter: alpha(opacity=0); 
    cursor: pointer; 
}

，我試圖展示當用戶點擊此鏈接時與該字段對應的文件選擇器：

<div class="logo_link_wrap"> 
    <a id="logo_change_link">Change Photo</a> 
</div>

其中有這樣的CSS：

.logo_link_wrap { 
    margin-top: 38px; 
    cursor: pointer; 
}

現在我將不可見的文件字段在鏈接，但光標不會變成一個指針像它應該當你將鼠標懸停在鏈接。文件選擇器確實顯示，實際上只有光標沒有改變，這讓我很難受。由於

來源

2012-01-13 dinjas

你需要與我們分享一些例子，因爲它很難理解你想要達到的目標。當有人點擊您頁面上的鏈接時，您正嘗試顯示上傳字段（輸入類型=文件）？你如何顯示該字段以及它位於何處？很難爲你調試這個問題，因爲我們沒有什麼可看的。這聽起來不是什麼大問題，因爲光標造型非常簡單，我只是不知道問題出在哪裏，除非我有一些代碼與你爭論。 – einar 2012-01-13 03:28:21

謝謝。是的，光標造型很簡單，但並不是文件輸入太多。 :( – dinjas 2012-01-13 04:15:59

包裝input標籤這個環節應該對你有所幫助： http://www.quirksmode.org/dom/inputfile.html

來源

2012-01-13 04:57:10 shrishaster

謝謝，我以前見過這個鏈接，這很有幫助。我還在這裏找到了一個非常相關的博客文章：http://www.viget.com/inspire/custom-file-inputs-with-a-bit-of-jquery/，它幫助我實現它。 – dinjas 2012-01-13 06:05:37

-1

嘗試在一個錨定標記

<a href="#"><input type="file" ... /></a>

來源

2012-01-13 03:03:41 Chibuzo

這將工作，但它然後還會添加其他品質的鏈接，即文字顏色，下劃線等。 CSS是一個更好的解決方案 – Richard 2012-01-13 03:06:44

CSS仍然可以用來刪除其他品質的鏈接保存指針 – Chibuzo 2012-01-13 03:12:37

是的，但添加一個質量更容易，更清潔，然後刪除多個但無論如何，我重新閱讀這個問題，並更新我的答案，以實際工作，他需要什麼 – Richard 2012-01-13 03:22:15

的問題是，要放置在輸入欄上的鏈接，使輸入字段使用opacity:0;不可見。但輸入字段仍然存在，並阻止遊標訪問鏈接。用display:none代替不透明度會更好嗎？

使用display:none可以隱藏輸入字段並將其從流中刪除。我假設你希望鏈接被用來激活輸入字段的上傳功能，並且我還假設你知道如何做到這一點。

來源

2012-01-13 12:19:44 einar

我能夠根據我在@shrishaster的評論中發佈的鏈接獲得它的工作。我相信，如果我通過顯示隱藏文件輸入：無，它將不再響應瀏覽器事件。此外，我改變它，使文本不再是一個鏈接，我只是需要它看起來像一個鏈接。我希望能夠使用鏈接點擊來觸發文件字段元素上的事件，遺憾的是，這在所有瀏覽器中都不受支持。 – dinjas 2012-01-14 01:50:50

如何通過點擊文本來顯示文件瀏覽器，並在鼠標懸停時將鼠標光標更改爲指針

回答

相關問題