File API 文件API

例：文件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);

}

}