例:文件API获取到上传的数据
css样式:
body {
position: relative;
}
.file {
visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
.div {
width: 300px;
height: 100px;
border: 5px dotted pink;
font-size: 1.5rem;
text-align: center;
line-height: 100px;
}
.div:hover {
cursor: pointer;
}
html:
<input id="file" class="file" multiple type="file />
<div id="div" class="div">点击上传文件</div>
js代码:
var file = document.querySelector('#file');
var div = document.querySelector('#div');
// 通过触发div的click事件,触发input的click事件
div.onclick = function () {
file.click();
}
file.onchange = function (e) {
for (var file of this.files) {
console.log(file);
}
}