|
|
|
@ -10,12 +10,6 @@
@@ -10,12 +10,6 @@
|
|
|
|
|
<body> |
|
|
|
|
<div class="head"> |
|
|
|
|
<div class="breadcrumb"></div> |
|
|
|
|
<div class="action" title="Upload file"> |
|
|
|
|
<label for="file"> |
|
|
|
|
<svg viewBox="0 0 384.97 384.97" width="14" height="14"><path d="M372.939,264.641c-6.641,0-12.03,5.39-12.03,12.03v84.212H24.061v-84.212c0-6.641-5.39-12.03-12.03-12.03 S0,270.031,0,276.671v96.242c0,6.641,5.39,12.03,12.03,12.03h360.909c6.641,0,12.03-5.39,12.03-12.03v-96.242 C384.97,270.019,379.58,264.641,372.939,264.641z"></path><path d="M117.067,103.507l63.46-62.558v235.71c0,6.641,5.438,12.03,12.151,12.03c6.713,0,12.151-5.39,12.151-12.03V40.95 l63.46,62.558c4.74,4.704,12.439,4.704,17.179,0c4.74-4.704,4.752-12.319,0-17.011l-84.2-82.997 c-4.692-4.656-12.584-4.608-17.191,0L99.888,86.496c-4.752,4.704-4.74,12.319,0,17.011 C104.628,108.211,112.327,108.211,117.067,103.507z"></path></svg> |
|
|
|
|
</label> |
|
|
|
|
<input type="file" id="file" name="file" multiple> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="main"> |
|
|
|
|
<div class="uploaders"> |
|
|
|
@ -34,11 +28,12 @@
@@ -34,11 +28,12 @@
|
|
|
|
|
</div> |
|
|
|
|
<script> |
|
|
|
|
|
|
|
|
|
const $head = document.querySelector(".head"); |
|
|
|
|
const $tbody = document.querySelector(".main tbody"); |
|
|
|
|
const $breadcrumb = document.querySelector(".breadcrumb"); |
|
|
|
|
const $fileInput = document.getElementById("file"); |
|
|
|
|
const $uploaders = document.querySelector(".uploaders"); |
|
|
|
|
const { breadcrumb, paths } = __DATA__; |
|
|
|
|
const $uploadControl = document.querySelector(".upload-control"); |
|
|
|
|
const { breadcrumb, paths, readonly } = __DATA__; |
|
|
|
|
let uploaderIdx = 0; |
|
|
|
|
|
|
|
|
|
class Uploader { |
|
|
|
@ -121,6 +116,17 @@
@@ -121,6 +116,17 @@
|
|
|
|
|
`) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
function addUploadControl() { |
|
|
|
|
$head.insertAdjacentHTML("beforeend", ` |
|
|
|
|
<div class="upload-control" title="Upload file"> |
|
|
|
|
<label for="file"> |
|
|
|
|
<svg viewBox="0 0 384.97 384.97" width="14" height="14"><path d="M372.939,264.641c-6.641,0-12.03,5.39-12.03,12.03v84.212H24.061v-84.212c0-6.641-5.39-12.03-12.03-12.03 S0,270.031,0,276.671v96.242c0,6.641,5.39,12.03,12.03,12.03h360.909c6.641,0,12.03-5.39,12.03-12.03v-96.242 C384.97,270.019,379.58,264.641,372.939,264.641z"></path><path d="M117.067,103.507l63.46-62.558v235.71c0,6.641,5.438,12.03,12.151,12.03c6.713,0,12.151-5.39,12.151-12.03V40.95 l63.46,62.558c4.74,4.704,12.439,4.704,17.179,0c4.74-4.704,4.752-12.319,0-17.011l-84.2-82.997 c-4.692-4.656-12.584-4.608-17.191,0L99.888,86.496c-4.752,4.704-4.74,12.319,0,17.011 C104.628,108.211,112.327,108.211,117.067,103.507z"></path></svg> |
|
|
|
|
</label> |
|
|
|
|
<input type="file" id="file" name="file" multiple> |
|
|
|
|
</div> |
|
|
|
|
`); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
function getSvg(path_type) { |
|
|
|
|
switch (path_type) { |
|
|
|
|
case "Dir": |
|
|
|
@ -161,7 +167,9 @@
@@ -161,7 +167,9 @@
|
|
|
|
|
document.addEventListener('DOMContentLoaded', () => { |
|
|
|
|
addBreadcrumb(breadcrumb); |
|
|
|
|
paths.forEach(file => addFile(file)); |
|
|
|
|
$fileInput.addEventListener("change", e => { |
|
|
|
|
if (readonly) { |
|
|
|
|
addUploadControl(); |
|
|
|
|
document.getElementById("file").addEventListener("change", e => { |
|
|
|
|
const files = e.target.files; |
|
|
|
|
for (const file of files) { |
|
|
|
|
uploaderIdx += 1; |
|
|
|
@ -169,6 +177,7 @@
@@ -169,6 +177,7 @@
|
|
|
|
|
uploader.upload(); |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
</script> |
|
|
|
|
</body> |
|
|
|
|