ajax upload

This commit is contained in:
Mitan Omar
2020-07-25 16:29:54 +02:00
parent ba65cfc2e9
commit fa61d878b5
2 changed files with 145 additions and 87 deletions

View File

@@ -3,7 +3,9 @@
<!-- welcome -->
<div class="jumbotron">
<h5><span class="glyphicon glyphicon-heart" aria-hidden="true"></span> {lang.WELCOME} <IF NAME="user_is">[ {username} ]</IF></h5>
<h5><span class="glyphicon glyphicon-heart" aria-hidden="true"></span> {lang.WELCOME} <IF NAME="user_is">[
{username} ]</IF>
</h5>
<p>{welcome_msg}</p>
</div>
@@ -30,7 +32,7 @@
</div>
</IF>
<INCLUDE NAME="progress">
<!-- form upload -->
@@ -41,7 +43,8 @@
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#fileUpload" role="tab">{lang.DOWNLOAD_F}</a>
<a class="nav-link active" data-toggle="tab" href="#fileUpload"
role="tab">{lang.DOWNLOAD_F}</a>
</li>
</ul>
</div>
@@ -54,7 +57,10 @@
<h4 class="card-title">{lang.VERTY_CODE}</h4>
<h6 class="card-subtitle mb-2 text-muted">{lang.NOTE_CODE}</h6>
<p class="card-text">
<img style="vertical-align:middle;" id="kleeja_img_captcha" src="{captcha_file_path}" alt="{lang.REFRESH_CAPTCHA}" title="{lang.REFRESH_CAPTCHA}" onclick="javascript:update_kleeja_captcha('{captcha_file_path}', 'kleeja_code_answer');" />
<img style="vertical-align:middle;" id="kleeja_img_captcha"
src="{captcha_file_path}" alt="{lang.REFRESH_CAPTCHA}"
title="{lang.REFRESH_CAPTCHA}"
onclick="javascript:update_kleeja_captcha('{captcha_file_path}', 'kleeja_code_answer');" />
<input type="text" name="kleeja_code_answer" id="kleeja_code_answer" />
</p>
</div>
@@ -67,15 +73,18 @@
<LOOP NAME=FILES_NUM_LOOP>
<div class="input-group mb-2" style="{{show}}" id="file-block-{{i}}" onclick="document.getElementById('file{{i}}').click();">
<div class="input-group mb-2" style="{{show}}" id="file-block-{{i}}"
onclick="document.getElementById('file{{i}}').click();">
<span class="input-group-prepend">
<div class="btn btn-primary file-button-browse">
<img src="{STYLE_PATH}images/folder.png" width="20" height="20">
<span class="image-preview-input-title">{lang.OPEN}</span>
</div>
</span>
<input type="file" name="file_{{i}}_" id="file{{i}}" data-number="{{i}}" style="display:none">
<input type="text" id="file-text{{i}}" disabled="disabled" placeholder="{lang.NO_FILE_SELECTED}" class="form-control">
<input type="file" name="file_{{i}}_" id="file{{i}}" data-number="{{i}}"
style="display:none">
<input type="text" id="file-text{{i}}" disabled="disabled"
placeholder="{lang.NO_FILE_SELECTED}" class="form-control">
</div>
</LOOP>
@@ -83,7 +92,8 @@
<div>
<br>
<div class="agree text-muted"><small>{terms_msg}</small></div>
<input type="submit" id="submitr" name="submitr" value="{lang.DOWNLOAD_F}" class="btn btn-outline-primary">
<input type="submit" id="submitr" name="submitr" value="{lang.DOWNLOAD_F}"
class="btn btn-outline-primary">
</div>
</div>
@@ -120,3 +130,51 @@
</div>
</IF>
</div>
<script>
let uploadForm = document.getElementById('uploader');
let uploadProgress = document.getElementById('uploadProgress');
let progressHolder = document.getElementById('progressHolder');
let loadbox = document.getElementById('loadbox');
let fileCount = {config.filesnum};
uploadForm.onsubmit = e => {
e.preventDefault();
let haveFiles = false;
for (let f = 0; f < fileCount; f++) {
let i = document.getElementById('file' + (f + 1));
if (i.value !== '')
{
haveFiles = true;
}
}
if (! haveFiles) {
return false;
}
var xhttp = new XMLHttpRequest();
xhttp.open("POST", "{action}", true);
xhttp.upload.onprogress = e => {
const percent = e.lengthComputable ? (e.loaded / e.total) * 100 : 0;
uploadProgress.style.width = percent.toFixed(2) + '%';
uploadProgress.textContent = percent.toFixed(2) + '%';
};
xhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
let response = JSON.parse(this.response);
loadbox.innerHTML = '';
response.forEach(element => {
loadbox.innerHTML += element.i + '<hr><br>';
});
}
};
let formd = new FormData(uploadForm);
formd.append('submitr', true);
formd.append('ajax', true);
progressHolder.style.display = '';
xhttp.send(formd);
return false;
}
</script>