Progress bar for DOWNLOAD files in Jquery

Question

Progress bar for DOWNLOAD files in Jquery

Navigation

#1 by (1 votes)

5

I've seen a lot of people looking to make a progress bar to download files, style MegaUpload.

I hit a lot to get here and would like to share with the crowd! Well I did not find ANYTHING on the internet I spent days researching ...

jquery download progress-bar

asked by anonymous 09.06.2016 / 04:16

1 answer

How to make the href that works inside my div with focus? How to destroy a session in java?

score 1 · Answer 1

Answer originally included by the author as part of the question

Until I joined codes here, there, and I managed to do it! Home Here is the code:

function downloadFile(opcoes){
    var options = $.extend({
        typeSend:"GET",
        file:null,
        newfile:null,
        abort:function(e){},
        error:function(e){},
        load:function(e){},
        finish:function(e){},
        progress:function(e){}
    }, opcoes);
    if(options.file==null){
        alert("Por favor, dê um nome ao arquivo...");return false
    }
    $.ajax({
      xhr: function() {
            var xhr = new window.XMLHttpRequest();
            xhr.responseType = "arraybuffer";
            xhr.addEventListener("abort", function() {options.abort()})
            xhr.addEventListener("error", function() {options.error()})
            xhr.addEventListener("loadend", function() {options.finish()})
            xhr.addEventListener("load", function() {
                var file_type = xhr.getResponseHeader('Content-Type');
                var disposition = xhr.getResponseHeader('Content-Disposition');
                if (disposition && disposition.indexOf('attachment') !== -1) {
                    var filenameRegex = /filename[^;=\n]*=((['"]).*?|[^;\n]*)/;
                    var matches = filenameRegex.exec(disposition);
                    if (matches != null && matches[1]) filename = matches[1].replace(/['"]/g, '');
                }else{
                    filename = options.file.replace(/^.*[\\/]/, '')
                }
                window.BlobBuilder = window.BlobBuilder || window.WebKitBlobBuilder || window.MozBlobBuilder || window.MSBlobBuilder;
                window.URL = window.URL || window.webkitURL;
                var arrayBufferView = new Uint8Array( this.response );
                var blob = new Blob( [ arrayBufferView ], { type: file_type } );
                var urlCreator = window.URL || window.BlobBuilder;
                var imageUrl = urlCreator.createObjectURL(blob);
                var a = document.createElement("a");
                document.body.appendChild(a);
                a.href = imageUrl;
                if(options.newfile!=null){
                    a.download = options.newfile;
                }else{
                    a.download = filename;
                }
                a.click(); 
                options.load()

            }, false);
            xhr.addEventListener("progress", function(evt){
                if (evt.lengthComputable) {
                    var percentComplete = Math.floor((evt.loaded / evt.total)*100);
                    options.progress(percentComplete)
                }
            }, false);
            return xhr;
        },
        type: options.typeSend,
        url: options.file
    });
}

To use the function simply insert it as follows:

$("#btDownload").bind("click tap press",function(e){
   downloadFile({
        typeSend:"GET",
        file:"/path/path/file.mov",
        newfile:"nome-do-novo-arquivo.mov",
        abort:function(e){console.error("Abort:"+e)},
        error:function(e){console.error("Erro:"+e)},
        load:function(e){console.log("Load:"+e)},
        finish:function(e){console.log("Finish:"+e)},
        progress:function(e){
              $("#progressBar").css({width:e+'%'})
        }
    });
});