css - 使用文本链接而不是输入上传文件

Question

我知道已经有一些关于此问题的帖子，但有些帖子的答案似乎引起了一些争议，所以我想知道是否有一种“万无一失”的方法可以在不使用输入字段的情况下触发文件上传。基本上我想要做的就是拥有一个带有图标和文本链接的 div，当您单击它时会触发文件上传。有点像:

.upload{
padding: 5px 10px 5px 30px;
background: url() center left no-repeat;
}
<div class="upload">(icon) Click here to add a photo</div>

任何帮助或建议将不胜感激，谢谢。

Answer 1

将以下内容添加到您的 html 中:

<input id="article_file_input" type="file" name="article_picture" style="display: none;">

并制作 anchor :

<a onclick="$('input[id=article_file_input]').click();">Click here to add files</a>