kliknij pole wprowadzania, aby wyświetlić okno dialogowe otwierania pliku, ale nie kliknij przycisk wybierz plik

Question

Mam pole wprowadzania i chcę, aby użytkownik kliknął pole wprowadzania, aby pokazać okno dialogowe otwierania pliku i pokazać nazwę pliku w tym samym polu wprowadzania. Ale jeśli użyję typu wejściowego = "plik", pokaże się "wybierz przycisk pliku", nie chcę wyświetlać przycisku. Jak mogę to zrobić?

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/ ** dont wan to, w jaki sposób ukryć przycisk Plik wybrać?

Answer 1

Możesz nakładać przezroczysty <input type="file"/> na przycisk stylu lub inny element.

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

Zobacz tę pracującą wersję demo pod tytułem JSFiddle.

Answer 2

Cóż, jest trochę hack do tego. Musisz mieć kontrolę przesyłania plików na stronie. Możesz go jednak ukryć i zasymulować kontrolę przesyłania plików za pomocą dowolnej innej kontrolki, takiej jak div/span/button i nadać jej styl według własnego uznania. Oto działająca próbka na 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

spróbować:

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

próbka Praca na JSFiddle