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

我有一个输入框，我想让用户点击输入框来显示“打开文件”对话框，并在同一个输入框中显示文件名。但是如果我使用输入类型=“文件”，它将显示“选择文件按钮”，我不想显示按钮。我怎么做

html:

---

**我不想这样，我如何隐藏“选择文件”按钮？

您可以将透明的

覆盖在样式化按钮或其他元素上

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

---

请参阅此演示。

这方面有一些小技巧。您确实需要在页面上具有文件上载控件。但您可以隐藏它，并使用任何其他控件（如div/span/button）模拟文件上载控件，并根据需要设置样式。这是一个工作样本

HTML:

单击以选择文件：

JS:

$（“#虚拟”）。单击（函数（）{
$（“#flupld”）。单击（）；
});
$（“#flupld”）。更改（功能（）{
//文件输入控件将文件路径返回为C:\fakepath\
//在windows上，因此我们重新移动它并仅显示文件名。
var file=$（this.val（）.replace（/C:\\fakepath\\\/ig'）；
$（“#文件名”）.text（文件）；
});

试试看：

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

---

这是一个非常有创意的黑客！或者，您可以调用div的onclick（）中未显示的函数的click（）方法，以获得更好的croo和旧浏览器compatibility@SuperScipt如果我不想要“打开文件”对话框，而想要“另存为dile”对话框，怎么样？@bleykFaust这是一个完全不同的问题，请尝试搜索内容配置或数据URI。@pathros oops，我的错；谢谢你让我知道。我已将其更新为新的url。是否有方法预先选择文件名？也就是说，当对话框打开时，会看到一个“建议的”文件名

<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>

$("#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);
});

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