Diego Sanches Blog

Hoje vou apresentar e explicar como utilizar um bom plugin de upload de arquivos em jQuery com barra de progresso do upload, aquelas que mostram a porcentagem do processo de envio da imagem.

O plugin que vou utilizar é o Uploadify, mas existem outros no qual sua utilização é bem semelhante como por exemplo plugin MultiFile e alguns métodos nativos fornecidos pelos próprio jQuery.

O Primeiro passo é baixar o pacote do plugin, encontrado na página inicial do Uploadify

Se houver dúvidas em sua utilização, o site disponibiliza também a documentação do Uploadify

Após concluir o download do pacote, descompate-o na mesma pasta onde irá criar o arquivo responsável por enviar os arquivos.

Com os arquivos necessários, você pode optar por utilizar os arquivos da biblioteca localmente ou direto do site do uploadify. Desta forma o acesso fica mais lento, porém a vantagem é que não há necessidade de copiar os arquivos em todos projetos que implementar Upload via jQuery.

<script type="text/javascript" src="http://www.uploadify.com/wp-content/themes/uploadify/_scripts/js/jquery.min.js"></script><script type="text/javascript" src="http://www.uploadify.com/wp-content/themes/uploadify/_scripts/js/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://www.uploadify.com/wp-content/themes/uploadify/_scripts/js/swfobject.js"></script><script type="text/javascript" src="http://www.uploadify.com/wp-content/themes/uploadify/_scripts/js/jquery.uploadify.min.js"></script>

Na estrutura do formulário de envio, algumas tags de códigos são exigidas para o tratamento de mensagens entre o servidor e o cliente.

</pre>
<div id="boxUpload">
<div id="status-message">Selecione as fotos para adicionar:</div>
 <input id="custom_file_upload" type="file" name="Filedata" /></div>
<pre>

Explicando:

boxUpload
Caixa onde todo o bloco deve ser inserido, para aplicar corretamente a formação de CSS.

Status-message
As mensagens de interação do envio do arquivo serão visualizadas nesta div, como por exemplo mensagem de sucesso, mensagem de erro, avisos e alertas.

Custom-queue
A barra de progresso de envio de cada arquivo serão visualizadas nesta div. O usuário poderá verificar se ocorrer algum erro no envio da imagem, ou mesmo a notificação de envio com sucesso do arquivo.

custom_file_upload
Este é o input que inicia o carregamento do arquivo.

O seguinte bloco de CSS pode ser utilizado para formatar os quadros e as mensagens.

E por fim, o bloco de código que será responsável pelo envio dos arquivos. Aqui, algumas configurações mínimas são necessárias.

Em nosso exemplo, vamos fazer upload de imagens, restritas aos formatos PNG, GIF e JPG e vamos permitir também que diversas imagens possam ser enviadas em uma única vez.

Nos passos anteriores, os arquivos já foram colocados em seus locais corretamente, então não é necessário modificar os parâmetros uploader, script e cancelimg.

No parâmetro folder, informe a pasta onde serão salvos os arquivos. Para nosso exemplo, cria uma pasta chamada “Arquivos” no mesmo diretorio em que extraiu o pacote do plugin.

No parâmetro FileExt informe as extenções de arquivos permitidas para upload.

<script type="text/javascript">// <![CDATA[
$(function() {

$('#custom_file_upload').uploadify({

'uploader'       : 'uploadify/uploadify.swf',
'script'         : 'uploadify/uploadify.php',
'cancelImg'      : 'uploadify/cancel.png',
'folder'         : 'arquivos',
'multi'          : true,
'auto'           : true,
'fileExt'        : '*.jpg;*.gif;*.png',
'fileDesc'       : 'Image Files (.JPG, .GIF, .PNG)',
'queueID'        : 'custom-queue',
'queueSizeLimit' : 3,
'simUploadLimit' : 3,
'removeCompleted': false,
'onSelectOnce'   : function(event,data) {
     $('#status-message').text(data.filesSelected + ' arquivos serão adicionados');
},
'onAllComplete'  : function(event,data) {
    //Executar determinada função em javascript quando o envio de todos os arquivos for concluído.
},

'onComplete'  : function(event, ID, fileObj, response, data) {
   //Executar determinada função em javascript quando o envio de um dos arquivos for concluido.
}

});

});
// ]]></script>

Para que o upload funcione corretamente o servidor de sua hospedagem deve fornecer suporte ao PHP, afinal o PHP é o responsável por salvar o arquivo na pasta após o upload. Também é possivel criar alguma solução em ASP, ASP.NET, coldfusion, etc. Nestes casos, utilize o arquivo uploadify.php fornecido pelo plugin, e utilize algum recurso com conhecimentos na linguagem específica, e inicie a conversão do arquivo. Depois de ter o arquivo seguindo as mesmas regras, modifique o parâmetro ‘script’ definido no código acima.

Agora que todo o código foi explicado, crie uma página com o nome de Upload.html por exemplo, e adicione todos os blocos de códigos informados neste artigo.

O arquivo deve ficar semelhante a este: Download do código fonte

A estrutura de pastas e arquivos final deve ficar como ilustra a imagem abaixo:

É clado que agora com tudo funcionando, é possivel realizar a customização total do plugin.
É possível modificar o arquivo uploadify.swf modificando o rótulo do botão ou cores de fundo, é possivel modificar o css, é possível passar o diretório de destino como parâmetro para utilizar o mesmo script em todos downloads do site, enfim, a criatividade do desenvolvedor será imprescindível neste momento.

Boa sorte, e dúvidas, podem contar comigo!