wsemi
Version:
A support package for web developer.
153 lines (116 loc) • 5.11 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 getFileHash</title>
<!-- @babel/polyfill已廢棄 -->
<script nomodule src="https://cdn.jsdelivr.net/npm/@babel/polyfill@7.12.1/dist/polyfill.min.js"></script>
<script src="../dist/wsemi.umd.js"></script>
</head>
<body>
<div style="border:1px solid #aaa;">
<div style="padding:10px; display:flex; align-items:center;">
<button style="display:block; width:150px; height:100px;" onclick="uploadFile()">upload file</button>
<div style="padding:5px;"></div>
<!-- 以檔案開啟時無法使用拖曳功能 -->
<div id="panel" style="display:flex; align-items:center; justify-content:center; width:100%; height:100px; border:1px solid #ddd;">
<p>drop file</p>
</div>
</div>
<div id="pnl_xxhash64" style="display:none; padding:10px;">
<div id="msg_xxhash64" style="padding:2px;">calculating xxhash64...</div>
<input type="text" id="txt_xxhash64" style="display:none; width:100%; box-sizing:border-box;">
<div id="time_xxhash64" style="display:none; padding:2px;"></div>
</div>
<div id="pnl_sha256" style="display:none; padding:10px;">
<div id="msg_sha256" style="padding:2px;">calculating sha256...</div>
<input type="text" id="txt_sha256" style="display:none; width:100%; box-sizing:border-box;">
<div id="time_sha256" style="display:none; padding:2px;"></div>
</div>
<div id="pnl_sha512" style="display:none; padding:10px;">
<div id="msg_sha512" style="padding:2px;">calculating sha512...</div>
<input type="text" id="txt_sha512" style="display:none; width:100%; box-sizing:border-box;">
<div id="time_sha512" style="display:none; padding:2px;"></div>
</div>
</div>
<script>
async function file2hash(file){
let calcdsp = async (type) => {
document.querySelector(`#pnl_${type}`).style.display = 'block'
document.querySelector(`#msg_${type}`).style.display = 'block'
let start = performance.now()
let hash = await wsemi.getFileHash(file,{type})
.catch(function(err){
console.log(err)
})
let end = performance.now()
let time = ((end - start)/1000).toFixed(2)
console.log('hash',hash)
document.querySelector(`#msg_${type}`).innerText = type
document.querySelector(`#txt_${type}`).style.display = 'block'
document.querySelector(`#txt_${type}`).value = hash
document.querySelector(`#time_${type}`).style.display = 'block'
document.querySelector(`#time_${type}`).innerText = `time cost: ${time}s`
}
await calcdsp('xxhash64')
await calcdsp('sha256')
await calcdsp('sha512')
}
function uploadFile(){
wsemi.domShowInputAndGetFiles()
.then(function(res){
// console.log('res',res)
//check
if(wsemi.iseobj(res.errs)){
throw new Error(res.errs)
}
//check
if(res.files.length===0){
console.log('can not get files by domShowInputAndGetFiles')
return
}
// console.log('files',res.files)
//file
let file=res.files[0]
console.log('file',file)
//file2hash
file2hash(file)
.catch(()=>{})
})
.catch(function(err){
console.log(err)
})
}
</script>
<script>
//domDropFiles
let ele = document.querySelector('#panel')
let ev = wsemi.domDropFiles(ele)
ev.on('getFiles', ({ files, filesTree, entries, cb }) => {
// console.log('files', files, 'filesTree', filesTree, 'entries', entries)
//check
if(files.length===0){
console.log('can not get files by domDropFiles')
return
}
// console.log('files',files)
//file
let file=files[0].file
console.log('file',file)
//file2hash
file2hash(file)
.catch(()=>{})
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>