Question

所以目前我的网站包含一个文本输入字段，我希望一旦我专注于它就会触发文件浏览器。然后，用户选择一个文件，将文本放入textinput，然后按提交上传。

我目前的HTML：

{{1}}

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

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

这是浏览器/安全问题吗？因为我发现的所有未被安全功能阻止的是将按钮覆盖在textinput上，这在我的情况下并不真正有效。

有任何线索吗？

Answer 1

使用https://netoffice.codeplex.com/discussions/471162

＆＃13;

$("#upload").focus(function() {
  $("#fileToUpload")[0].click()
})

＆＃13;

<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>

＆＃13;

Answer 2

我的建议是：

纯粹的javascript：

＆＃13;

window.onload = function() {
  document.getElementById('upload').addEventListener('focus',function(e) {
    document.getElementById('fileToUpload').click();
  }, false);
}

＆＃13;

<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>

＆＃13;

在jQuery中：

＆＃13;

$(function () {
  $('#upload').on('focus', function(e) {
    $('#fileToUpload').click();
  });
});

＆＃13;

<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>

＆＃13;

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

2 个答案: