Show file name, size and type to upload
This commit is contained in:
@@ -57,9 +57,10 @@
|
|||||||
<!--begin::Controls-->
|
<!--begin::Controls-->
|
||||||
<div class="dropzone-panel mb-4">
|
<div class="dropzone-panel mb-4">
|
||||||
<!-- a class="dropzone-select btn btn-sm btn-primary me-2">Attach files</a -->
|
<!-- a class="dropzone-select btn btn-sm btn-primary me-2">Attach files</a -->
|
||||||
<input class="dropzone-select btn btn-sm btn-primary me-2" type='file' name='fileToUpload[]' multiple="" id="fileToUpload[]">
|
<input class="dropzone-select btn btn-sm btn-primary me-2" type='file' name='fileToUpload[]' multiple="" id="fileToUpload[]" onchange="fileToUploadChanged(this)">
|
||||||
<!-- a class="dropzone-upload btn btn-sm btn-light-primary me-2">Upload All</a>
|
<!-- a class="dropzone-upload btn btn-sm btn-light-primary me-2">Upload All</a>
|
||||||
<a class="dropzone-remove-all btn btn-sm btn-light-primary">Remove All</a -->
|
<a class="dropzone-remove-all btn btn-sm btn-light-primary">Remove All</a -->
|
||||||
|
<br><div id="fileToUploadList"></div>
|
||||||
<br><input class="dropzone-select btn btn-sm btn-primary me-2" type='submit' value='Upload' name='upload' />
|
<br><input class="dropzone-select btn btn-sm btn-primary me-2" type='submit' value='Upload' name='upload' />
|
||||||
</div>
|
</div>
|
||||||
<!--end::Controls-->
|
<!--end::Controls-->
|
||||||
@@ -116,3 +117,38 @@
|
|||||||
</div>
|
</div>
|
||||||
<!--end::Modal - Upload File-->
|
<!--end::Modal - Upload File-->
|
||||||
|
|
||||||
|
<script type="text/javascript">
|
||||||
|
<!--
|
||||||
|
function fileToUploadChanged(e) {
|
||||||
|
var fileToUploadList = document.getElementById('fileToUploadList');
|
||||||
|
fileToUploadList.innerHTML = '';
|
||||||
|
e.files.forEach(file => {
|
||||||
|
//alert(file.name);
|
||||||
|
fileToUploadList.innerHTML += '<br><b>' + file.name + '</b> - ' + humanFileSize(file.size) + ' (' + file.type + ')';
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function humanFileSize(bytes, si=false, dp=1) {
|
||||||
|
const thresh = si ? 1000 : 1024;
|
||||||
|
|
||||||
|
if (Math.abs(bytes) < thresh) {
|
||||||
|
return bytes + ' B';
|
||||||
|
}
|
||||||
|
|
||||||
|
const units = si
|
||||||
|
? ['kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
|
||||||
|
: ['KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB'];
|
||||||
|
let u = -1;
|
||||||
|
const r = 10**dp;
|
||||||
|
|
||||||
|
do {
|
||||||
|
bytes /= thresh;
|
||||||
|
++u;
|
||||||
|
} while (Math.round(Math.abs(bytes) * r) / r >= thresh && u < units.length - 1);
|
||||||
|
|
||||||
|
|
||||||
|
return bytes.toFixed(dp) + ' ' + units[u];
|
||||||
|
}
|
||||||
|
|
||||||
|
// -->
|
||||||
|
</script>
|
||||||
Reference in New Issue
Block a user