mirror of
https://github.com/kleeja-official/kleeja.git
synced 2025-12-16 21:19:41 +01:00
ajax upload
This commit is contained in:
@@ -79,7 +79,7 @@ switch ($case):
|
|||||||
continue;
|
continue;
|
||||||
}
|
}
|
||||||
|
|
||||||
if($case == 'check' && $row['plg_disabled'] == 1)
|
if ($case == 'check' && $row['plg_disabled'] == 1)
|
||||||
{
|
{
|
||||||
continue;
|
continue;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -3,7 +3,9 @@
|
|||||||
|
|
||||||
<!-- welcome -->
|
<!-- welcome -->
|
||||||
<div class="jumbotron">
|
<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>
|
<p>{welcome_msg}</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -19,104 +21,160 @@
|
|||||||
<li class="list-group-item">
|
<li class="list-group-item">
|
||||||
{{message_content}}
|
{{message_content}}
|
||||||
</li>
|
</li>
|
||||||
<ELSE>
|
<ELSE>
|
||||||
<!-- error -->
|
<!-- error -->
|
||||||
<li class="list-group-item list-group-item-danger">
|
<li class="list-group-item list-group-item-danger">
|
||||||
<strong>{lang.INFORMATION}</strong> : {{message_content}}
|
<strong>{lang.INFORMATION}</strong> : {{message_content}}
|
||||||
</li>
|
</li>
|
||||||
</IF>
|
</IF>
|
||||||
</LOOP>
|
</LOOP>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</IF>
|
</IF>
|
||||||
|
|
||||||
|
<INCLUDE NAME="progress">
|
||||||
|
|
||||||
|
|
||||||
|
<!-- form upload -->
|
||||||
<!-- form upload -->
|
<form id="uploader" action="{action}" method="post" enctype="multipart/form-data">
|
||||||
<form id="uploader" action="{action}" method="post" enctype="multipart/form-data">
|
|
||||||
|
|
||||||
|
|
||||||
<div class="card text-center">
|
<div class="card text-center">
|
||||||
<div class="card-header">
|
<div class="card-header">
|
||||||
<ul class="nav nav-tabs card-header-tabs">
|
<ul class="nav nav-tabs card-header-tabs">
|
||||||
<li class="nav-item">
|
<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"
|
||||||
</li>
|
role="tab">{lang.DOWNLOAD_F}</a>
|
||||||
</ul>
|
</li>
|
||||||
</div>
|
</ul>
|
||||||
<div class="card-body tab-content">
|
</div>
|
||||||
|
<div class="card-body tab-content">
|
||||||
|
|
||||||
<IF NAME="config.safe_code">
|
<IF NAME="config.safe_code">
|
||||||
<!-- verification code -->
|
<!-- verification code -->
|
||||||
<div class="safe_code card">
|
<div class="safe_code card">
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<h4 class="card-title">{lang.VERTY_CODE}</h4>
|
<h4 class="card-title">{lang.VERTY_CODE}</h4>
|
||||||
<h6 class="card-subtitle mb-2 text-muted">{lang.NOTE_CODE}</h6>
|
<h6 class="card-subtitle mb-2 text-muted">{lang.NOTE_CODE}</h6>
|
||||||
<p class="card-text">
|
<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"
|
||||||
<input type="text" name="kleeja_code_answer" id="kleeja_code_answer" />
|
src="{captcha_file_path}" alt="{lang.REFRESH_CAPTCHA}"
|
||||||
</p>
|
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>
|
||||||
</div>
|
</div>
|
||||||
|
</IF>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- files upload -->
|
||||||
|
<div class="tab-pane active" id="fileUpload" role="tabpanel">
|
||||||
|
|
||||||
|
<LOOP NAME=FILES_NUM_LOOP>
|
||||||
|
|
||||||
|
<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">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</LOOP>
|
||||||
|
|
||||||
|
<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">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<!-- box loading -->
|
||||||
|
<div id="loadbox" class="card">
|
||||||
|
<div class="card-body">
|
||||||
|
{lang.WAIT_LOADING}
|
||||||
|
<br>
|
||||||
|
<img src="{STYLE_PATH}images/loading.gif" alt="{lang.LOADING}" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<IF NAME="show_online">
|
||||||
|
<!-- who's onLine -->
|
||||||
|
<div class="card who-online">
|
||||||
|
<div class="card-header">
|
||||||
|
{lang.NUMBER_ONLINE}: <b>{current_online_users}</b>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<IF NAME="show_names">
|
||||||
|
<div class="card-body">
|
||||||
|
<LOOP NAME="show_names">
|
||||||
|
<span class="badge badge-pill badge-default">{{name}}</span>
|
||||||
|
</LOOP>
|
||||||
</div>
|
</div>
|
||||||
</IF>
|
</IF>
|
||||||
|
|
||||||
|
|
||||||
<!-- files upload -->
|
|
||||||
<div class="tab-pane active" id="fileUpload" role="tabpanel">
|
|
||||||
|
|
||||||
<LOOP NAME=FILES_NUM_LOOP>
|
|
||||||
|
|
||||||
<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">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</LOOP>
|
|
||||||
|
|
||||||
<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">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</IF>
|
||||||
|
|
||||||
</form>
|
|
||||||
|
|
||||||
<!-- box loading -->
|
|
||||||
<div id="loadbox" class="card">
|
|
||||||
<div class="card-body">
|
|
||||||
{lang.WAIT_LOADING}
|
|
||||||
<br>
|
|
||||||
<img src="{STYLE_PATH}images/loading.gif" alt="{lang.LOADING}" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<IF NAME="show_online">
|
|
||||||
<!-- who's onLine -->
|
|
||||||
<div class="card who-online">
|
|
||||||
<div class="card-header">
|
|
||||||
{lang.NUMBER_ONLINE}: <b>{current_online_users}</b>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<IF NAME="show_names">
|
|
||||||
<div class="card-body">
|
|
||||||
<LOOP NAME="show_names">
|
|
||||||
<span class="badge badge-pill badge-default">{{name}}</span>
|
|
||||||
</LOOP>
|
|
||||||
</div>
|
|
||||||
</IF>
|
|
||||||
</div>
|
|
||||||
</IF>
|
|
||||||
</div>
|
</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>
|
||||||
Reference in New Issue
Block a user