Plupload

Um problema frequentemente encontrado no desenvolvimento web é criar um sistema de upload. Quando há necessidade de enviar uma grande quantidade de arquivos – uma galeria de fotos, por exemplo – ou quando é preciso enviar arquivos grandes – o que seria mais interessante com uma barra de progresso, as limitadas opções da tag <input type=”file” /> não são suficientes para suprir nossas necessidades. Neste post vou mostrar um plugin jQuery chamado Plupload. Como ele é possivel fazer upload usando praticamente todos os recurso que o navegador do cliente oferece.

Opções

Plupload fornece as seguintes possibilidades de upload:

Flash

Gears

Silverlight

BrowserPlus

HTML 5

HTML 4

Código fonte

<!-- Carrega o CSS e o jQuery -->
<style type="text/css">@import url(css/plupload.queue.css);</style>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>

<!-- Scripts de terceiros, necessário para o Google Gears e o BrowserPlus -->
<script type="text/javascript" src="js/gears_init.js"></script>
<script type="text/javascript" src="http://bp.yahooapis.com/2.4.21/browserplus-min.js"></script>

<!-- Plupload e jQuery Queue Widget -->
<script type="text/javascript" src="js/plupload.full.min.js"></script>
<script type="text/javascript" src="js/jquery.plupload.queue.min.js"></script>

<script type="text/javascript">

    $(function() {
        // Flash
        $("#flash_uploader").pluploadQueue({
            // Configurações Gerais
            runtimes : 'flash',
            url : 'upload.php',
            max_file_size : '10mb',
            chunk_size : '1mb',
            unique_names : true,
            multipart:true,

            // Redimensiona as imagens do lado do cliente, quando possível
            resize : {width : 320, height : 240, quality : 90},

            // Especifica os tipos de arquivos válidos
            filters : [
                {title : "Imagess", extensions : "jpg,gif,png"},
                {title : "Arquivos Zip", extensions : "zip"}
            ],

            // Confiruação do Flash
            flash_swf_url : 'js/plupload.flash.swf'
        });

        // Gears
        $("#gears_uploader").pluploadQueue({
            // Configurações Gerais
            runtimes : 'gears',
            url : 'upload.php',
            max_file_size : '10mb',
            chunk_size : '1mb',
            unique_names : true,
            multipart:true,

            // Redimensiona as imagens do lado do cliente, quando possível
            resize : {width : 320, height : 240, quality : 90},

            // Especifica os tipos de arquivos válidos
            filters : [
                {title : "Imagess", extensions : "jpg,gif,png"},
                {title : "Arquivos Zip", extensions : "zip"}
            ]
        });

        // Silverlight
        $("#silverlight_uploader").pluploadQueue({
            // Configurações Gerais
            runtimes : 'silverlight',
            url : 'upload.php',
            max_file_size : '10mb',
            chunk_size : '1mb',
            unique_names : true,
            multipart:true,

            // Redimensiona as imagens do lado do cliente, quando possível
            resize : {width : 320, height : 240, quality : 90},

            // Especifica os tipos de arquivos válidos
            filters : [
                {title : "Imagess", extensions : "jpg,gif,png"},
                {title : "Arquivos Zip", extensions : "zip"}
            ],

            // Configuração do Silverlight
            silverlight_xap_url : 'js/plupload.silverlight.xap'
        });

        // BrowserPlus
        $("#browserplus_uploader").pluploadQueue({
            // Configurações Gerais
            runtimes : 'browserplus',
            url : 'upload.php',
            max_file_size : '10mb',
            chunk_size : '1mb',
            unique_names : true,
            multipart:true,
            dragdrop : false,

            // Redimensiona as imagens do lado do cliente, quando possível
            resize : {width : 320, height : 240, quality : 90},

            // Especifica os tipos de arquivos válidos
            filters : [
                {title : "Imagess", extensions : "jpg,gif,png"},
                {title : "Arquivos Zip", extensions : "zip"}
            ]
        });

        // HTML5
        $("#html5_uploader").pluploadQueue({
            // Configurações Gerais
            runtimes : 'html5',
            url : 'upload.php',
            max_file_size : '10mb',
            chunk_size : '1mb',
            unique_names : true,
            multipart:true,

            // Redimensiona as imagens do lado do cliente, quando possível
            resize : {width : 320, height : 240, quality : 90},

            // Especifica os tipos de arquivos válidos
            filters : [
                {title : "Imagess", extensions : "jpg,gif,png"},
                {title : "Arquivos Zip", extensions : "zip"}
            ]
        });

        // HTML4
        $("#html4_uploader").pluploadQueue({
            // Configurações Gerais
            runtimes : 'html4',
            url : 'upload.php'
        });
    });
</script>

...

<h3>Flash</h3>
<div id="flash_uploader">Este navegador não pussui Adobe Flash instalado.</div>

<h3>Gears</h3>
<div id="gears_uploader">Este navegador não possui o Google Gears instalado.</div>

<h3>Silverlight</h3>
<div id="silverlight_uploader">Esse navegador não possui o plugin Microsoft Silverlight instalado.</div>

<h3>BrowserPlus</h3>
<div id="browserplus_uploader">Esse navegador não possui o plugin Yahoo BrowserPlus instalado.</div>

<h3>HTML 5</h3>
<div id="html5_uploader">Esse navegador não suporta upload nativo. Tente com Firefox 3 ou Safari 4.</div>

<h3>HTML 4</h3>
<div id="html4_uploader">Seu navegador não suporta um formulário simples de upload. Você está usando Lynx?</div>

Qual escolher?

Agora você pergunta:

• Qual é a melhor opção?
• Como saber qual opções estão disponíveis no navegador de cada cliente?

Simples! Use essa opção:

Tudo em um

<script type="text/javascript">

    $(function() {
        $("#uploader").pluploadQueue({
            // Configurações Gerais
            runtimes : 'html5,gears,flash,silverlight,browserplus,html4',
            url : 'upload.php',
            max_file_size : '10mb',
            chunk_size : '1mb',
            unique_names : true,
            multipart:true,

            // Redimensiona as imagens do lado do cliente, quando possível
            resize : {width : 320, height : 240, quality : 90},

            // Especifica os tipos de arquivos válidos
            filters : [
                {title : "Imagens", extensions : "jpg,gif,png"},
                {title : "Arquivos Zip", extensions : "zip"}
            ],

            // Flash
            flash_swf_url : 'js/plupload.flash.swf',

            // Silverlight
            silverlight_xap_url : 'js/plupload.silverlight.xap'
        });
    });
</script>

...

<div id="uploader">
    <p>Seu navegador não suporta Flash, Silverlight, Gears, BrowserPlus ou HTML5.</p>
</div>

Ou seja, você determina uma lista de opções, a primeira disponível será utilizada.

Links

• Plupload
• jQuery

Num post futuro vou falar sobre a tradução do plugin.
Aqui está a tradução: Plupload – Traduzir para Portguês

Espero que vocês tenham gostado! Até a próxima.