You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
135 lines
4.5 KiB
135 lines
4.5 KiB
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>BI更新系统</title>
|
|
<link rel="stylesheet" href="/static/css/bootstrap.css">
|
|
<link rel="stylesheet" href="/static/css/jquery.fileupload.css">
|
|
<link rel="stylesheet" href="/static/css/upload.css">
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div class="container">
|
|
|
|
<div class="page-header">
|
|
<h1>FileUpload</h1>
|
|
</div>
|
|
|
|
<p>Drag files or click the "Upload Files..." button to upload new files</p>
|
|
|
|
|
|
<div class="btn-toolbar">
|
|
<div class="btn btn-primary fileinput-button">
|
|
Upload files
|
|
<input id="fileupload" type="file" name="files[]" multiple>
|
|
</div>
|
|
<div class="btn btn-primary fileinput-button">
|
|
Upload folder
|
|
<input id="folderupload" type="file" name="folders[]" directory multiple webkitdirectory>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="panel panel-default">
|
|
<div class="panel-heading">Upload Queue</div>
|
|
<table class="table table-striped">
|
|
<tbody id="uploads">
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="panel panel-default">
|
|
<div class="panel-heading">
|
|
<ol class="breadcrumb" id="path">
|
|
<li class="active">{{.}} Recevied Files</li>
|
|
</ol>
|
|
</div>
|
|
<table class="table table-striped">
|
|
<tbody id="listing">
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script>
|
|
var fileInput = document.getElementById('fileupload');
|
|
var uploads = document.getElementById('uploads');
|
|
var listing = document.getElementById('listing');
|
|
|
|
fileInput.addEventListener('change', function(e) {
|
|
handleFiles(e.target.files);
|
|
});
|
|
|
|
document.body.addEventListener('dragover', function(e) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
}, false);
|
|
|
|
document.body.addEventListener('drop', function(e) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
handleFiles(e.dataTransfer.files);
|
|
}, false);
|
|
|
|
function handleFiles(files) {
|
|
for (var i = 0; i < files.length; i++) {
|
|
var file = files[i];
|
|
var row = document.createElement('tr');
|
|
row.innerHTML = '<td class="column-path"><p>' + file.name + '</p></td><td class="column-progress"><div class="progress"><div class="progress-bar" style="width: 0%;"></div></div></td>';
|
|
uploads.appendChild(row);
|
|
uploadFile(file, row);
|
|
}
|
|
}
|
|
|
|
function uploadFile(file, row) {
|
|
var progressBar = row.querySelector('.progress-bar');
|
|
var formData = new FormData();
|
|
formData.append("file", file);
|
|
var ajax = new XMLHttpRequest();
|
|
ajax.upload.addEventListener('progress', function(e) {
|
|
var percent = Math.round((e.loaded / e.total) * 100);
|
|
progressBar.style.width = percent + '%';
|
|
});
|
|
ajax.addEventListener('load', function() {
|
|
uploads.removeChild(row);
|
|
var newRow = document.createElement('tr');
|
|
newRow.innerHTML = '<td class="column-name"><p>' + file.name + '</p></td><td class="column-size"><p>' + (file.size / 1024 / 1024).toFixed(2) + ' MB</p></td>';
|
|
listing.appendChild(newRow);
|
|
});
|
|
ajax.open("POST", "/", true);
|
|
ajax.send(formData);
|
|
}
|
|
var folderInput = document.getElementById('folderupload');
|
|
|
|
folderInput.addEventListener('change', function(e) {
|
|
handleFiles(e.target.files);
|
|
});
|
|
|
|
function handleFiles(files) {
|
|
for (var i = 0; i < files.length; i++) {
|
|
var file = files[i];
|
|
if (file.webkitRelativePath) {
|
|
var parts = file.webkitRelativePath.split('/');
|
|
var fileName = parts.pop();
|
|
var folderPath = parts.join('/');
|
|
var row = document.createElement('tr');
|
|
row.innerHTML = '<td class="column-path"><p>' + folderPath + '/' + fileName + '</p></td><td class="column-progress"><div class="progress"><div class="progress-bar" style="width: 0%;"></div></div></td>';
|
|
uploads.appendChild(row);
|
|
uploadFile(file, row);
|
|
} else {
|
|
var row = document.createElement('tr');
|
|
row.innerHTML = '<td class="column-path"><p>' + file.name + '</p></td><td class="column-progress"><div class="progress"><div class="progress-bar" style="width: 0%;"></div></div></td>';
|
|
uploads.appendChild(row);
|
|
uploadFile(file, row);
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</html>
|
|
|