5

Tenho visto muitas pessoas procurando como fazer uma barra de progresso para download de arquivos, estilo o MegaUpload.

Me bati muito até chegar aqui e gostaria de compartilhar com a galera!
Pois não encontrei NADA na internet passei dias pesquisando...

3
  • 3
    Israel é louvável sua boa intenção em compartilhar a solução, mas o funcionamento do SO é diferente de fóruns. Você poderia separar a pergunta da resposta? Desta forma, ambos ficam conforme o site exige. Dê uma olhada no tour para ver como deve ficar.
    – user28595
    9/06/2016 às 12:13
  • 3
    @Israel como o Diego disse, para sua postagem ficar adequada para o site, faltou um pequeno passo, mas é simples. Basta editar a pergunta, deixando só a dúvida, e postar a solução no campo de baixo, de respostas.
    – Largato
    9/06/2016 às 12:39
  • Show! farei isso... 10/06/2016 às 15:04

1 Resposta 1

1

Resposta originalmente incluída pelo autor como parte da pergunta

Até que juntei códigos aqui, ali, e consegui fazer!

Segue o código:

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]*=((['"]).*?\2|[^;\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
    });
}

Para usar a função basta inserir assim:

$("#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+'%'})
        }
    });
});

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .