/Shell/Bash/Js code for webpage download progress bar

Js code for webpage download progress bar

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="a1" data-filename="filename.xml">Click to download</div>
<script>
$('#a1').click(function() {
    var that = this;
    var page_url = 'download.php';

    var req = new XMLHttpRequest();
    req.open("POST", page_url, true);
    req.addEventListener("progress", function (evt) {
        if(evt.lengthComputable) {
            var percentComplete = evt.loaded / evt.total;
            console.log(percentComplete);
        }
    }, false);

    req.responseType = "blob";
    req.onreadystatechange = function () {
        if (req.readyState === 4 && req.status === 200) {
            var filename = $(that).data('filename');
            if (typeof window.chrome !== 'undefined') {
                // Chrome version
                var link = document.createElement('a');
                link.href = window.URL.createObjectURL(req.response);
                link.download = filename;
                link.click();
            } else if (typeof window.navigator.msSaveBlob !== 'undefined') {
                // IE version
                var blob = new Blob([req.response], { type: 'application/force-download' });
                window.navigator.msSaveBlob(blob, filename);
            } else {
                // Firefox version
                var file = new File([req.response], filename, { type: 'application/force-download' });
                window.open(URL.createObjectURL(file));
            }
        }
    };
    req.send();
});
</script>

Source: stackoverflow.com

Js code for webpage download progress bar

<li>
    <div class="f_icon"><img src="' . $ico_path . '"></div>
    <div class="left_wing">
       <div class="progressbar"></div>
       <a class="download_link" href="#" id="'.$file_id.'"><div class="f_name">' . $full_file_name . '</div></a>
       <div class="f_time_size">' . date("M d, Y", $file_upload_time) . '&nbsp; &#149; &nbsp;' . human_filesize($file_size) . '</div>
    </div>

    <div class="right_wing">
       <div class="f_delete">
       <a class="btn btn-danger" href="#" aria-label="Delete" data-id="'.$file_id.'" data-filename="'.$full_file_name.'"><i class="fa fa-trash-o fa-lg" aria-hidden="true" title="Delete this?"></i>
       </a>
    </div>
   </div>
    </li>

Similar codes

0 vote188 views1 answer
List users debian
Shell/Bash
0 vote142 views1 answer
Get total hdd space linux
Shell/Bash
0 vote167 views1 answer
Append data to a file with cat command
Shell/Bash
0 vote158 views1 answer
Unistall filezilla ubuntu
Shell/Bash
0 vote141 views1 answer
Netspeed ubuntu 20.04
Shell/Bash
6 votes152 views3 answers
Git switch user
Shell/Bash
0 vote204 views1 answer
How to install app from android phone programmatically
Shell/Bash
1 vote150 views1 answer
Rsync skipping non-regular file
Shell/Bash
0 vote157 views1 answer
76 packages are looking for funding run `npm fund` for details found 7 vulnerabilities (5 low, 1 moderate, 1 high) run `npm audit fix` to fix them, or `npm audit` for details
Shell/Bash
0 vote181 views1 answer
Git create master branch in empty repository
Shell/Bash