Javascript 如何使链接充当文件输入

我有一个链接

<a id="upload-file">Upload your photo</a>

上传你的照片

如果单击，我希望它充当浏览文件输入

<input id="upload-file" type="file"/>

我怎样才能做到这一点呢？

最好的一个 编辑：

请参阅此演示：

JQUERY:

$("#upload").click(function(){
    $("#upload-file").trigger('click');
});

HTML

<a href="javascript:void(0)" id="upload">Upload your photo</a>
<input id="upload-file" type="file"/>

<input id="upload" type="file"/>
<a href="" id="upload_link">Upload your photo</a>​

<label for="inputUpload" class="custom-file-upload">Upload your file</label>
<input id="inputUpload" type="file" />

或

您可以使用这样好的插件：

---

您可以有一个隐藏的

标记，然后可以调用

$（“#upload”）。单击（）

以模拟单击

---

或者，您可以有一个带有id的隐藏标签，然后只需在链接中添加标签属性即可。

以下内容将解决此问题

html

js

HTML

<a href="javascript:void(0)" id="upload">Upload your photo</a>
<input id="upload-file" type="file"/>

<input id="upload" type="file"/>
<a href="" id="upload_link">Upload your photo</a>​

<label for="inputUpload" class="custom-file-upload">Upload your file</label>
<input id="inputUpload" type="file" />

JS

#upload-file {
    display:none;
}

#upload{
    display:none
}

$(function(){
    $("#upload_link").on('click', function(e){
        e.preventDefault();
        $("#upload:hidden").trigger('click');
    });
});

#inputUpload {
    display: none;
}

.custom-file-upload {
    cursor: pointer;
    font-size: inherit;
    color: #0c090d;
}

.custom-file-upload:hover {
    text-decoration: underline;
}

---

在Angular 6中，您可以这样做

<li class="list-group-item active cursor-pointer" (click)="file.click()">
    <i class="fas fa-cloud-upload-alt"></i> Upload <input type="file" #file hidden />
  </li>

上传

---

单击li html标记时，会触发输入按钮的单击。“隐藏”属性使其不可见。

您可以在不使用Javascript的情况下这样做。具有属性的跨浏览器解决方案：

HTML

<a href="javascript:void(0)" id="upload">Upload your photo</a>
<input id="upload-file" type="file"/>

<input id="upload" type="file"/>
<a href="" id="upload_link">Upload your photo</a>​

<label for="inputUpload" class="custom-file-upload">Upload your file</label>
<input id="inputUpload" type="file" />

---

仅限HTML

这里有一个非常简单的答案，它不需要CSS、Javascript/jQuery，也不依赖任何框架基础设施

<label>
  <input type="file" style="display: none;">
  <a>Upload Photo link</a>
</label>

上传照片链接

甚至更简单

<label>
  <input type="file" style="display: none;">
  Upload Photo link
</label>

上传照片链接

真正聪明的解决方案。这显然是正确的答案，我会花几个小时从零开始想办法解决这个问题。谢谢。欢迎并祝大家新年快乐@usumoio:-）2021年仍然有效！请举例说明你的第二个选择。