jquery - jQuery：如何在单击按钮上打开文件打开对话框

Question

如何在单击swallow渲染按钮时打开对话框。它可以是动态可重复的按钮，因为它在里面li。

//代码

var wrapper = $(this).parents(".file-upload-wrapper")[0];
$(wrapper).find('.attachment-button-div')[0].click(function() {
 $(wrapper).find('.attachment-button')[0].trigger('click');

});

$(wrapper).find('.file-upload').change(function() {
 $('input[type=text]').val($(this).val());
});

但它没有按预期工作。任何建议。

Answer 1

你可以试试这个。为每个按钮创建按钮和相应的不可见文件输入。添加一些 jQuery 来触发/单击相应的不可见文件输入：

function openfile(a) {
  $(a).trigger('click');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="button1" onclick='openfile("#file-input3")' class="file-button"> Open</button>
<input id="file-input1" type="file" name="name" style="display: none;" />

<button id="button2" onclick='openfile("#file-input2")' class="file-button"> Open</button>
<input id="file-input2" type="file" name="name" style="display: none;" />

<button id="button3" onclick='openfile("#file-input3")' class="file-button"> Open</button>
<input id="file-input3" type="file" name="name" style="display: none;" />

Answer 2

为什么你不简单地使用文件类型的输入标签？它打开选择文件对话框。

<h3>Please choose your attachment:</h3>
<form action="">
  <label for="myfile">Select files:</label>
  <input type="file" id="myfile" name="myfile" multiple><br><br>
  <input type="submit">
</form>