如题，搞过文件上传的，一定会有这类主意，也是初学者经常犯的“误区”

let input = document.createElement('input');
input.type = 'file';
input.click();

像我如许履历老道的，一看，“不可能，这会遭到浏览器安全策略限定”，牛逼哄哄的祭出正解

让 input[type=file] 飘在点击区上方，熟手的习用手法，这就叫“履历”，但近来一些事，让我啪啪打脸，推翻了我的认知，不信你尝尝在 Chrome 的 Console 中试一下上面的三行代码。

。。。。。。

是否是很不测，让你在 Chrome 中试，是因为现在彷佛只要 Chrome 能这么斗胆勇敢的摊开，让你这么豪恣，我们再尝试在 Safari 下试一下

。。。。。。

彷佛没结果，我们可联想到，浏览器限定这些东西，无非是想确定是工资操纵，而非自动运转，在许多相似的状况，都有相似请求“人机交互事宜发作时”，比方用户点击、键盘敲击。我们能够这么尝试一下

<input id="file" type="file" style="display:none" />
<button id="trigger">挑选</button>

<script>
let input = document.getElementById('file');

document.getElementById('trigger').onclick = function () {
  input.click();
};
</script>

这类状况很合适那种，“原生的input的太丑，我想弄个美丽的按钮触发上传”、“我想更文雅的掌握上传”

另有一种状况我想在输入域中输入某个敕令，回车触发上传

<input id="file" type="file" style="display:none" />
<div id="trigget" contenteditable>敲击回车触发上传</div>
<script>
let input = document.getElementById('file');

document.getElementById('trigger').onkeypress = function (e) {
  e.preventDefault();
  input.click();
};
</script>

浏览器兼容性以下

能够说是全兼容。

有些版本我懒得测了，但我想连IE8都行，别的的不必测了吧

IE 下，
input[type=file] 须要存在文档流中

至此，我想你之前经历过的，input 飘在某个按钮上方这类别扭设想能够扔掉了。

然则还没完，不知道人人有无想到 labelFor 的运用场景，假如只是想点击事宜转移，我们能够尝试以下计划

<input id="file" type="file" style="display:none" />
<label for="file">
  <span>点击上传</span>
</label>

或许

<label>
  <span>点击上传</span>
  <input type="file" style="display:none" />
</label>

这类体式格局，属于html原生支撑的、设想云云的，不须要一句js剧本，适用于简朴质朴的原生表单。

到现在为止，所谓”强健的”的浩瀚上传控件，仍然在运用习用手法，这类不文雅的体式格局，早该被镌汰了，该是重构的时刻了。