在HTML上传表单中添加进度条、使用Javascript或Ajax的PHP

我有一些代码从我的网站上传表单中使用的html上传文件使用PHP。 表单工作正常，但没有显示进度条

我尝试在上传过程中以相同的形式添加进度条。。不幸的是，我们无法做到这一点，因为它需要一些不熟悉的javascript编码

我尝试了谷歌的一些代码和其他stackoverflow问题，但仍然无法完成我想要的

我尝试在javascript中添加一些代码并将它们嵌入HTML表单，但没有成功。 我也在谷歌上搜索了太多，找不到解决方案，但一切都是徒劳的

这是我在下面发布的代码，我已经对上传过程中显示的内容发表了评论。请检查在此表单中实现常规进度条所需的内容

    <!-- 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 -->

选择一个文件

{terms_msg}
{terms_msg}
{lang.VERTY_CODE}

{lang.NOTE\u CODE}
{lang.WAIT_LOADING}//这显示了一个特定的短语，而不是上载图像时的进度条

我得到的只是一个空白状态栏，没有任何关于上传过程的移动或状态。文件上载成功，但工具栏不工作

如果任何人能够帮助适当的进度实施，将不胜感激