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

Question

我知道已经有一些关于这个的帖子，但有些帖子的答案似乎引起了一些争议，所以我想知道是否有一种“万无一失”的方式来触发文件上传而不使用输入字段。基本上我想做的 id 有一个带有图标和文本链接的 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;">

并制作锚点：

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