Upload com Javascript

Segue neste tutorial como fazer upload de arquivos para uma página server-side usando apenas jQuery e objeto javascript, sem criar iframe ou semelhante, usando o recurso xhr do Ajax, possibilitando o uso de barra de progresso e permitir múltiplos envios em uma única página.

Isto é semelhante com o upload de arquivos do Gmail.




Segue abaixo o código:

/* Requer jQuery */
/* Modo de usar:
 *  UploadData( $('input[type="file"]') );
*/
function UploadData(obj){
    var FormDataFilesUpload = new FormData(); // Cria formulário baseado em objeto JavaScript.
    /* Pega todos os arquivos do objeto passado pela função */
    $.each( $(obj)[0].files , function (index,file) { FormDataFilesUpload.append('data_file', file); }); // Anexa todos os arquivos neste formulário.
   
    $(obj).val(''); // Limpa os objetos carregados no elemento físico da página.
   
    $.ajax({ // Inicia o ajax para transmitir os arquivos.
        url: 'upload.php?elementoGet=xptoValor',
        data: FormDataFilesUpload,
        cache: false,
        contentType: false,
        processData: false,
        type: 'POST',
        beforeSend: function(){
       /* Área para inserir código para executar antes de iniciar a requisição ajax. Ex.: Bloqueio de tela durante o upload. */
        },
        xhr: function(){  
        /* Função xhr para tratamento de download e upload do formulário Ajax */
            var xhr = new window.XMLHttpRequest();
            /* Registro do evento para progresso de upload */
            xhr.upload.addEventListener("progress", function(evt){
              if (evt.lengthComputable) {
                var percentComplete = evt.loaded / evt.total;
                /* Pode fazer uso da variável abaixo para exibir o progresso */
                $('.progresso').css({width:percentComplete*100 +'%'});
               
              }
            }, false);
            /* Registro para evento de download */
            xhr.addEventListener("progress", function(evt){
              if (evt.lengthComputable) {
                var percentComplete = evt.loaded / evt.total;
                /* Progresso de download */
                $('.progresso').css({width:percentComplete*100 +'%'});
               
              }
            }, false);
           
            return xhr;
        },
        success: function (data) {
        /* Ao finalizar o upload com sucesso */
            $('.progresso').css({width:'0%'});
        },
        fail: function (data) {
        /* Ao finalizar o upload com erro */
           
            $('.progresso').css({width:'0%'});
        }
    }); /* ajax */
}