在 JavaScript 中打开文件对话框

javascript file dialog

2022-08-30 04:18:19

我需要一个解决方案，以便在单击时以HTML显示打开的文件对话框。单击时，必须打开打开文件对话框。divdiv

我不想将输入文件框显示为HTML页面的一部分。它必须显示在单独的对话框中，该对话框不是网页的一部分。

答案 1

    $("#logo").css('opacity','0');
    
    $("#select_logo").click(function(e){
       e.preventDefault();
       $("#logo").trigger('click');
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" id="select_logo">Select Logo</a> <input type="file" id="logo">

对于IE，请添加以下内容：

$("#logo").css('filter','alpha(opacity = 0');

答案 2

我不知道为什么没有人指出这一点，但这是一种在没有任何Javascript的情况下做到这一点的方法，它也与任何浏览器兼容。

编辑：在 Safari 中，当使用 .更好的方法是使用。inputdisplay: noneposition: fixed; top: -100em

编辑2：另一种方法是使用.问题是它可能会弄乱布局。我在示例中添加了一些 CSS 来说明问题。opacity: 0

label {
    display: inline-block;
    background: #ddd;
    border: 1px outset #ccc;
    border-radius: .3em;
    padding: .3em 1em;
    margin: .5em;
}

label:active {
  border-style: inset;
}

<label>
  Using <code>position: fixed</code>
  <input type="file" style="position: fixed; top: -100%">
</label>

<label>
  Using <code>opacity: 0</code>
  <input type="file" style="opacity: 0">
</label>

如果您愿意，可以通过在指向输入时使用“正确的方式”，如下所示：forlabelid

<label for="inputId">file dialog</label>
<input id="inputId" type="file" style="position: fixed; top: -100em">