javascript 单击输入框以显示打开文件对话框但不单击选择文件按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19310450/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
click on input box to show open file dialog but not click on choose file button
提问by youaremysunshine
I have an input box and I want user to click on the input box to show the open file dialog and show the filename in the same input box. But if I use the input type="file", it will show the "choose file button", I dont wan to show the button. How can I do it?
我有一个输入框，我希望用户单击输入框以显示打开文件对话框并在同一输入框中显示文件名。但是如果我使用 input type="file"，它会显示“选择文件按钮”，我不想显示该按钮。我该怎么做？
html:
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/** I dont wan this, how do I hide the choose file button?
http://jsfiddle.net/EctCK/** 我不想要这个，如何隐藏选择文件按钮？
回答by Robbie Wxyz
回答by TheVillageIdiot
Well there is a little hack for this. You do need to have file upload control on the page. But you can hide it and simulate the file upload control using any other control like div/span/button and style it as you want. Here is a working sample on jsfiddle.
好吧，这有一个小技巧。您确实需要在页面上进行文件上传控制。但是您可以隐藏它并使用任何其他控件（如 div/span/button）模拟文件上传控件，并根据需要设置样式。这是一个关于jsfiddle的工作示例。
HTML:
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:
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);
});
回答by S.Parseh
try it:
试试看：
<input type="file" id="upload" style="display:none">
<a href="" onclick="document.getElementById('upload').click(); return false;"> Upload </a>
Working sample on JSFiddle
JSFiddle 上的工作示例
