是否有办法添加在选择菜单中浏览文件的功能?

Is there a way to add the ability to browse for files in a select menu?

本文关键字:浏览 文件 功能 菜单 选择 添加 是否      更新时间:2023-09-26

所以我有一个选择菜单,允许用户选择几种方法来选择他们想要做的文件。他们可以创建自己的文件,内联,他们可以从现有的文件中选择,或者他们可以浏览他们的电脑上传文件。当他们从选择菜单中选择最后一个选项时,我希望它能自动启动浏览器/操作系统的"文件选择器"对话框,但我不知道如何让它在操作系统和浏览器之间工作。从技术上讲,我只需要它在Windows和OSX上为FF和Chrome(最新版本)工作。

这是我想要做的一个例子,尽管这甚至不太接近工作(文件输入类隐藏了浏览器添加的所有典型的文件选择器)。这看起来就像一个简单的文本字符串):

<select>
    <option value="note" class="disabled">Select File</option>
    <option value="import">
     <label id="add-computer-button" for="fileupload" class="file-input-button-spirent">Import File</label>
      <input id="fileupload" type="file" multiple="multiple" name="browse" accept="image/*" class="file-input-button" />
    </option>
    <option value="library">Select from Library</option>
    <option value="custom">Build file</option>
  </select>

试试这样写:

<script>
 $("#selectList").on("change", function(){
   var x = $("option:selected",this).val();
    if(x=="import"){
     $("#fileUpload").click();
    }
  });
</script>
<select id="selectList">
    <option value="note" class="disabled">Select File</option>
    <option value="import"></option>        
    <option value="library">Select from Library</option>
    <option value="custom">Build file</option>
  </select>
     <input id="fileUpload" type="file" name="upload" accept=""  style="display:none;">