Добавить индикатор выполнения в форму загрузки HTML, PHP с Javascript или Ajax

Question

У меня есть некоторый код с моего сайта для формы загрузки, используемой в html для загрузки файлов с использованием PHP. Форма работает отлично, но не показывает индикатор выполнения.

Я пытался добавить индикатор выполнения в той же форме во время процесса загрузки. К сожалению, не смог этого сделать, поскольку он требует некоторого кодирования javascript, с которым не знаком.

Я попробовал несколько кодов из Google и другие вопросы от stackoverflow, но все еще не смог закончить то, что я хочу.

Я пытался добавить несколько кодов в javascript и вставить их в форму HTML, не сработало. и я также слишком много искал в Google, чтобы найти решение, но все было напрасно.

Это мой код, размещенный ниже, я прокомментировал, что показывает во время процесса загрузки. Пожалуйста, отметьте, что необходимо для внедрения обычного индикатора выполнения в эту форму.

    <!-- form upload -->
    <form id="uploader" action="{action}" method="post" enctype="multipart/form-data">
        <div class="upload-inner">

        <!-- upload boxes -->
        <div class="tabmain">

            <ul class="tabnav">
                <!-- First-Tab -->
                <li title="{lang.DOWNLOAD_F}"><a href="#" onclick="return false;"><i class="fa lnk-icon-0"></i><em>{lang.DOWNLOAD_F}</em></a></li>
                <!-- @First-Tab -->

                <!-- Second-Tab -->
                <IF NAME="config.www_url">
                <li title="{lang.DOWNLOAD_T}"><a href="#" onclick="return false;"><i class="fa lnk-icon-1"></i><em>{lang.DOWNLOAD_T}</em></a></li>
                </IF>
                <!-- @Second-Tab -->

                <!--you-can-add-another-tab-here-->

            </ul>

            <!-- First-Box -->
            <div class="tabcon" title="{lang.DOWNLOAD_F}">
            <div class="go_up clfx">
                <!-- upload normal -->
                <LOOP NAME=FILES_NUM_LOOP>
                <div class="up-input clfx" id="up_{{i}}">
                    <input class="file" type="file" name="file_{{i}}_" data-number="{{i}}" style="{{show}}" onchange="readURL_file_(this,'.file-icon-{{i}}','#up_{{i}}','#info_list_{{i}}');" />
                    <span class="btn"><i class="fa fa-folder-open"></i> <em> Choose a File </em></span>
                    <span class="file-icon"><i></i><img class="file-icon-{{i}}" src="{STYLE_PATH}img/blank.png" alt=""></span>
                    <a href="#" class="reset-input"><i class="fa fa-close"></i></a>
                </div>
                <ul class="info-up_{{i}} file-info clfx" id="info_list_{{i}}"></ul>
                </LOOP>
                <div class="agree"><span>{terms_msg}</span></div>
                <div class="bn_up"><input type="submit" id="submitr" name="submitr" value=" {lang.DOWNLOAD_F}" /></div>
                <!-- @upload normal -->
            </div>
            </div>
            <!-- @First-Box -->

            <!-- Second-Box -->
            <IF NAME="config.www_url">
            <div class="tabcon" title="{lang.DOWNLOAD_T}">
            <div class="go_up clfx">
                <!-- upload URL -->
                <LOOP NAME=FILES_NUM_LOOP>
                <input class="url" type="text" name="file_{{i}}_" style="{{show}}" placeholder=" {lang.PAST_URL_HERE}" value="" />
                </LOOP>
                <div class="agree"><span>{terms_msg}</span></div>
                <div class="bn_up"><input type="submit" id="submittxt" name="submittxt" value="{lang.DOWNLOAD_T}" /> </div>
                <!-- @upload URL -->
            </div>
            </div>
            </IF>
            <!-- @Second-Box -->

            <!--you-can-add-another-box-here-->

        </div>
        <!-- @upload boxes -->


        <IF NAME="config.safe_code">
        <!-- verification code -->
        <div class="safe_code IEs_c">
            <p>{lang.VERTY_CODE}</p>
            <div class="clr"></div>
            <div>
                <img style="vertical-align:middle;" id="raed_img_captcha" src="{captcha_file_path}" alt="{lang.REFRESH_CAPTCHA}" title="{lang.REFRESH_CAPTCHA}" onclick="javascript:update_kleeja_captcha('{captcha_file_path}', 'raed_code_answer');" />
                <input type="text" name="raed_code_answer" id="raed_code_answer" />
            </div>
            <div class="clr"></div>
            <p class="explain">{lang.NOTE_CODE}</p>
        </div>
        <div class="clr"></div>
        <!-- @end-verification-code -->
        </IF>

    </div>
</form><!-- @end-form-upload -->

<!-- box loading -->
<div id="loadbox">
    <div class="loading-container">
        <div class="wrap">
            <div class="center">
                <div class="document-loader">
                    <span class="heading short"></span>
                    <span class="line short"></span>
                    <span class="line"></span>
                    <span class="line"></span>
                    <span class="line"></span>
                    <span class="line short"></span>
                    <span class="line"></span>
                    <span class="line"></span>
                    <span class="line short"></span>
                    <span class="heading"></span>
                    <span class="line"></span>
                    <span class="line"></span>
                    <span class="line short"></span>
                    <span class="line"></span>
                    <span class="line"></span>
                    <span class="line"></span>
                    <span class="line"></span>
                    <span class="line short"></span>
                </div>
                <div class="waitloading clfx">{lang.WAIT_LOADING}</div>  // This shows a specific Phrase instead of progress bar while uploading including image
            </div>
        </div>
</div><br /><br />
</div><!-- @end-box-loading -->

Все, что я получаю, это пустая строка состояния без какого-либо движения или статуса процесса загрузки. Файл успешно загружен, но панель не работает.

Если кто-то может помочь с соответствующей реализацией прогресса, это будет оценено.