在聚焦文本输入时触发文件选择

Trigger file selection upon focusing text input

本文关键字：文件 选择 聚焦 文本 输入      更新时间：2023-09-26

因此，目前我的网站由一个文本输入字段组成，我希望在我关注它时立即触发文件浏览器。然后用户选择一个文件，在文本输入中输入文本，然后按提交上传。

我当前的HTML:

<input type="text" placeholder="upload" class="card" id="upload">
<br>
<div class="enter" id="submit-upload">upload</div>
<form action="upload.php" method="post" enctype="multipart/form-data">
    <input type="file" name="fileToUpload" id="fileToUpload">
    <input type="submit" value="Upload Image" name="submit">
</form>

问题是我找不到启动文件浏览器的方法。我已经尝试了很多方法，从.click（）到s，将文本输入放入表单中，以及许多隐藏文件输入的方法。

但我似乎根本无法触发文件输入。

这是浏览器/安全问题吗？因为我所能找到的没有被安全功能阻止的只是将按钮覆盖在文本输入上，这在我的情况下并不起作用。

有线索吗？

使用HTMLElement.click（）

$("#upload").focus(function() {
  $("#fileToUpload")[0].click()
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" placeholder="upload" class="card" id="upload">
<br>
<div class="enter" id="submit-upload">upload</div>
<form action="upload.php" method="post" enctype="multipart/form-data">
    <input type="file" name="fileToUpload" id="fileToUpload">
    <input type="submit" value="Upload Image" name="submit">
</form>

我的建议是：

纯javascript:

window.onload = function() {
  document.getElementById('upload').addEventListener('focus',function(e) {
    document.getElementById('fileToUpload').click();
  }, false);
}
<input type="text" placeholder="upload" class="card" id="upload">
<br>
<div class="enter" id="submit-upload">upload</div>
<form action="upload.php" method="post" enctype="multipart/form-data">
    <input type="file" name="fileToUpload" id="fileToUpload">
    <input type="submit" value="Upload Image" name="submit">
</form>

在jQuery中：

$(function () {
  $('#upload').on('focus', function(e) {
    $('#fileToUpload').click();
  });
});
<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<input type="text" placeholder="upload" class="card" id="upload">
<br>
<div class="enter" id="submit-upload">upload</div>
<form action="upload.php" method="post" enctype="multipart/form-data">
    <input type="file" name="fileToUpload" id="fileToUpload">
    <input type="submit" value="Upload Image" name="submit">
</form>

相关文章：