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);

}

}

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容