我有一个输入框,我希望用户点击输入框以显示打开的文件对话框,并在同一个输入框中显示文件名。但是,如果我使用输入类型=“文件”,它将显示“选择文件按钮”,我不想显示按钮。我该怎么办?
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/ **我不想这样,我如何隐藏选择文件按钮?
答案 0 :(得分:13)
您可以将透明<input type="file"/>
覆盖在样式化按钮或其他元素上。
<input type="file" style="opacity:0;"/>
有关正常工作的演示,请参阅此JSFiddle。
答案 1 :(得分:7)
对此有一点点破解。您需要在页面上进行文件上传控制。但您可以使用任何其他控件(如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);
});
答案 2 :(得分:-1)
试一试:
<input type="file" id="upload" style="display:none">
<a href="" onclick="document.getElementById('upload').click(); return false;"> Upload </a>
JSFiddle上的工作样本