单击输入框以显示打开文件对话框但不单击选择文件按钮

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);
});