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

【问题标题】：click on input box to show open file dialog but not click on choose file button单击输入框以显示打开文件对话框，但不单击选择文件按钮
【发布时间】：2013-10-19 01:55:03
【问题描述】：

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

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/ ** 我不要这个，如何隐藏选择文件按钮？

【问题讨论】：

标签： javascript jquery file-upload

【解决方案1】：

您可以将透明的<input type="file"/> 覆盖在样式按钮或其他元素上。

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

查看此JSFiddle 以获得工作演示。

【讨论】：

这是一个非常有创意的 hack！
或者您可以在 div 的 onclick() 中调用未显示的的 click() 方法，以获得更好的 croos-and-old-browser 兼容性
@SuperScipt 如果我不想要打开文件对话框，而是想要“另存为”对话框，该怎么办？
@bleykFaust 这是一个完全不同的问题，请尝试搜索内容处置或数据 URI。
@pathros 哎呀，我的错；谢谢你让我知道。我已将其更新为新网址。

【解决方案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);
});

【讨论】：

有没有办法预先选择文件名？也就是说，当对话框打开时，会看到一个“建议的”文件名

【解决方案3】：

试试看：

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

JSFiddle 上的工作示例

【讨论】：