點擊輸入框顯示打開的文件對話框，但沒有點擊選擇文件按鈕

我有一個輸入框，我希望用戶點擊輸入框來顯示打開的文件對話框，並在同一個輸入框中顯示文件名。但如果我使用輸入類型=「文件」，它會顯示「選擇文件按鈕」，我不想顯示按鈕。我該怎麼做？點擊輸入框顯示打開的文件對話框，但沒有點擊選擇文件按鈕

HTML：

<div class="fileupload"> 
    <input type="file" class="file" name="image" /> 
</div> 

<div class="fileupload"> 
    <input type="file" class="file" name="attachement" /> 
</div>

http://jsfiddle.net/EctCK/ **我不婉這一點，我怎麼躲選擇文件按鈕？

來源

2013-10-11 youaremysunshine

您可以在透明的按鈕或其他元素上覆蓋透明的<input type="file"/>。

<input type="file" style="opacity:0;"/>

查看此JSFiddle進行工作演示。

來源

2013-10-11 05:00:37

這是一個真正有創造性的劈！ – guest

或者你可以在div的onclick（）中調用非顯示的click（）方法，以獲得更好的croos-and-old-browser兼容性 – tomasb

@SuperScipt如果我不想打開文件對話框，另存爲dile對話框？ – bleykFaust

那麼這裏有一點小技巧。您確實需要在頁面上進行文件上傳控制。但是你可以隱藏它並使用任何其他控件（如div/span/button）模擬文件上傳控件，並根據需要進行設置。以下是jsfiddle上的工作示例。

HTML：

<div id="dummy" class="dummyDiv"> 
    <span>click to chose file:</span> 
    <span id="fileName" class="yellow"></span> 
</div> 
<div class="wrapper"> 
    <input type="file" id="flupld" /> 
</div>

JS：

$("#dummy").click(function() { 
    $("#flupld").click(); 
}); 

$("#flupld").change(function() { 
    //file input control returns the file path as C:\fakepath\<file name> 
    //on windows, so we remeove it and show only file name. 
    var file=$(this).val().replace(/C:\\fakepath\\/ig,''); 

    $("#fileName").text(file); 
});

來源

2013-10-11 05:14:05 TheVillageIdiot

這是一個很好的技巧，使用display：none – shevy

有沒有辦法預先選擇文件名？也就是說，當對話框打開時，會看到一個「建議」的文件名 – Pathros

-1

嘗試：

<input type="file" id="upload" style="display:none"> 
    <a href="" onclick="document.getElementById('upload').click(); return false;"> Upload </a>

工作樣品上JSFiddle

來源

2015-10-11 19:36:07

點擊輸入框顯示打開的文件對話框，但沒有點擊選擇文件按鈕

回答

相關問題