定义文件上传标签:
<input type="file" multiple accept=".vtp" style="display: none;"/>
获取上传标签:
const fileInput = fileContainer.querySelector('input');
function preventDefaults(e) {
e.preventDefault();//阻止系统默认(行为)
e.stopPropagation();//阻止js事件冒泡
}
function handleFile(e) {
preventDefaults(e);
//DataTransfer 对象用于保存拖动并放下(drag and drop)过程中的数据。它可以保存一项或多项数据,这些数据项可以是一种或者多种数据类型。
const dataTransfer = e.dataTransfer;
const files = e.target.files || dataTransfer.files;
if (files.length > 0) {
//load为加载数据具体做的一些事情,此处不做过多解释
load(myContainer, { files });
}
}
fileInput.addEventListener('change', handleFile);
fileContainer.addEventListener('drop', handleFile);
fileContainer.addEventListener('click', (e) => fileInput.click());
fileContainer.addEventListener('dragover', preventDefaults);