нажмите на поле ввода, чтобы открыть диалоговое окно открытого файла, но не нажмите кнопку выбора файла

Question

У меня есть окно ввода, и я хочу, чтобы пользователь щелкнул по полю ввода, чтобы открыть диалоговое окно открытого файла и показать имя файла в том же поле ввода. Но если я использую тип ввода = «файл», он покажет «кнопку выбора файла», я не хочу показывать кнопку. Как мне это сделать?

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/ ** Я не тусклый это, как я могу скрыть кнопку файла выбрать?

Answer 1

Вы можете наложить прозрачный <input type="file"/> на стилизованную кнопку или на другой элемент.

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

Смотреть это JSFiddle для рабочей демонстрации.

Answer 2

Хорошо, есть немного взломать для этого. Вам нужно иметь управление загрузкой файлов на странице. Но вы можете скрыть его и имитировать элемент управления загрузкой файлов с помощью любого другого элемента управления, например 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); 
}); 

Answer 3

попробовать:

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

Работа образца на JSFiddle