wsemi
Version:
A support package for web developer.
63 lines (55 loc) • 1.99 kB
HTML
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-tw">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>examples for domDropFiles</title>
<!-- @babel/polyfill已廢棄 -->
<script nomodule src="https://cdn.jsdelivr.net/npm/@babel/polyfill@7.12.1/dist/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/wsemi@1.7.19/dist/wsemi.umd.js"></script>
<script>
let log = console.log
console.log = function(){
log.apply(null, arguments)
wsemi.bodyLog.apply(null, arguments)
}
</script>
</head>
<body>
<div id="panel" style="display:flex; align-items:center; justify-content:center; height:100px; border:1px solid #ddd;">
<p>Drag files or folders to this Drop Zone ...</p>
</div>
<script>
//domDropFiles
let ele = document.querySelector('#panel')
let ev = wsemi.domDropFiles(ele)
ev.on('getFiles', ({ files, filesTree, entries, cb }) => {
//console.log(files, filesTree, entries)
console.log('show files')
for(let i = 0; i < files.length; i++) {
let v=files[i]
console.log(v.type,v.name,v.path)
}
console.log('show filesTree')
for(let i = 0; i < filesTree.length; i++) {
let v=filesTree[i]
console.log(v.type,v.name,v.path)
}
console.log('show entries')
for(let i = 0; i < entries.length; i++) {
let v=entries[i]
console.log(v.type,v.name,v.path)
}
cb()
})
ev.on('dropIn', function() {
console.log('dropIn')
})
ev.on('dropOut', function() {
console.log('dropOut')
})
ev.on('error', function(err) {
console.log('error', err)
})
</script>
</body>
</html>