Webpoint

 
Depois de fazer um esforço para mudar a estrutura do plugin em como é chamado e não mais depender dos parâmetros do swfupload, refiz toda a lógica de opções do plugin e abstrair todas as opções do upload.

Sendo assim, o plugin agora só tem um parâmetro que são as opções do plugin. Antes passando as opções do swfupload o desenvolvedor poderia quebrar o funcionamento atual sobrescrevendo eventos. Nesta versão o plugin possui todas as configurações e assim pode extender e customizar sem afetar as atuais funcionalidades.

Documentação

Os requisitos para o funcionamento do plugin estão listado abaixo:

• jQuery v1.3.2
• SWFUpload v2.1
• jQuery UI 1.7 (usando somente o efeito de highlight)

Suporte:

• IE 7+
• Chrome 1+
• Firefox 3+
• Safari 3+

* Não houve teste no IE6

Utilização

Primeiro, você deve incluir o plugin e suas dependências:

 <link type="text/css" href="jquery.jqswfupload.css" rel="stylesheet" />

<script language="JavaScript" type="text/javascript" src="libs/jquery-1.3.2.min.js"></script>

<script language="JavaScript" type="text/javascript" src="libs/jquery-ui-1.7.1.custom.min.js"></script>

<script language="JavaScript" type="text/javascript" src="libs/swfupload.js"></script>

<script language="JavaScript" type="text/javascript" src="libs/jquery.jqswfupload.js"></script>

Esta ordem é importante para que o plugin possa funcionar corretamente.

jqswfupload usa a biblioteca swfupload em conjunto com o jQuery. Então ele sobrescreve um simples input de arquivo com um sistema de upload múltiplos baseado em flash que possui todo o controle de progresso e tamanho do arquivo.

A marcação mínima para que o plugin possa funcionar está listada abaixo:

 <div id="upload-container">

<form action="upload.php" method="post" enctype="multipart/form-data">

<div id="upload-placeholder">

<input type="file" name="Filedata" />

<input type="submit" value="upload" />

</div>

</form>

</div>

Com esta marcação você pode invocar o plugin com as seguintes opções:

<pre>/*
* jQuery upload - main file
*/
$(document).ready(function(){
$("#upload-container").jqswfupload({
onUploadStart: function(file) {
$('#debug-bar').append('Upload Started: '+file.name);
},
onFileSuccess: function(file,data,response) {
$('#debug-bar').append('File success: '+ file.name + data);
},
onFileError: function(file,code,message){
$('#debug-bar').append('File Error: '+ file.name + message);
},
totalSize: '100 kb',
uploadUrl: upload_uri + 'upload.php',
// The post sent to server in the same request as the file object
post_params : {
'type' : 'swfupload',
'test' : 'val'
}
});
});</pre>

O plugin usa um parâmetro, um objeto literal de opções

 $('container').jqswfupload(options);

Opções do Plugin

• uploadUrl
  a url que ira receber a lógica do upload
  tipo: string
  padrão: '../upload.php'
• flashUrl
  o caminho do arquivo swf da biblioteca swfupload
  tipo: string
  padrão: "libs/swfupload.swf"
• buttomPlaceholderId
  O id do elemento usado para identificar o container e onde tem inserido o upload do tipo file
  tipo: string
  padrão: 'upload-placeholder'
• buttomImageUrl
  A url da imagem para adicionar o arquivo
  tipo: string
  padrão: 'images/icon-add.gif'
• buttomText
  O texto do botão. ex.: "adicionar arquivos"
  tipo: string
  padrão:vazio
• buttomWidth
  A largura em pixels do botão
  tipo: number
  padrão: 172

• buttomHeight
  A altura em pixels do botão
  tipo: number
  padrão: 22
• fileTypes
  Os tipos de arquivos permitidos. ex.: "*.jpg,*.png"
  tipo: string
  padrão: "*.*"
• fileSizeLimit
  O limite de cada arquivo
  tipo: number
  padrão: 10000
• multiple
  Definir se o upload será múltiplo
  tipo: boolean
  padrão: true
• cursorType
  Definir tipo de cursor
  tipo: string
  padrão: 'hand'
• dialogDescription
  O cabeçalho da descrição do diálogo de upload do browser
  tipo: string
  padrão: "Web Image Files"
• columns
  Os rótulos das colunas na interface de upload
  tipo: object
  padrão:
  columns: {
  file : 'File',
  size : 'Size',
  action : 'Action'
  }
• messages
  As mensagens usadas para darem as diferentes notificações
  tipo: object
  padrão:
  messages : {
  file_size_limit : 'You reach the total size',
  file_already_exist : 'Some(s) of the file already exist, the other(s) was included',
  browser_upload : 'Are you having problem with this upload? Try the common upload instead',
  start: 'Start upload',
  all_completed: 'All uploads are completed'
  }
• totalSize
  O tamanho total dos arquivos permitidos. Pode passar em bytes, kb ou MB
  tipo: string
  padrão: '5 MB'
• messageDelay
  O tempo que as mensagens de notifiação permanecem na tela
  tipo: number
  padrão: 3000
• post_params
  Dados adicionais enviados via post para cada tipo de arquivo no formato chave : valor
  tipo: object
  padrão: empty object

Callbacks

onFileQueue(file)
onDialogClose(files_selected,files_queued,total_queued)
onSwfuploadLoaded()
onUploadStart(file)
onUploadProgress(file,completed,total)
onFileComplete(file)
onFileError(file,error,message)
onFileSuccess(file,data,response)

//formato dos parametros adicionais

post_params : {

"post_param_name_1" : "post_param_value_1",

"post_param_name_2" : "post_param_value_2",

"post_param_name_n" : "post_param_value_n"

},

Para uma completa referência das opções do swfupload, veja a documentação do swfupload

Dúvidas frequentes

Aqui está uma lista das dúvidas frequentes que podem ocorrer ao utilizar o jqswfupload:

Qual a vantagem deste plugin em relação a utilizar o swfupload sozinho?

SWFUpload é uma ótima biblioteca utilizada amplamente em grandes projetos para realizar uploads múltiplos. Ela torna fácil a integração do flash com a interface web que não seja puramente nesta tecnologia. Entretanto, o swfupload tem muitos eventos, callbacks e opções que permite a flexibilidade para o desenvolvedor criar a experiência completa de upload utilizando javascript para criar todo o dom necessário para fazer isto acontecer. Este plugin é baseado na experiência do usuário utilizada no upload de fotos do Flickr. Toda a interface pode ser customizada por CSS. Com algumas vantagens, o jqswfupload estende as funcionalidades do swfupload, como progresso geral de arquivo e limitação de tamanho máximo da fila, não simplesmente limitar o tamanho de um único arquivo. O plugin foi construído para tornar este tipo de upload da "maneira jQuery de ser" que com uma linha você pode ter tudo funcionando e você tem o objeto de opções para ter o poder de mudar de acordo com sua necessidade.

O upload retorna um erro 404, o que pode ser isto?

Provavelmente a opção upload_url do swfupload não está correta. Não se esqueça de tornar o link absoluto ou relativo ao caminho do plugin.

Eu segui todos os passo na documentação, mas aina aparece um input de arquivos normal, o que pode ter acontecido?

Provavelmente você não colocou corretamento o arquivo swf ou não modificou a opção flash_url. Não se esqueça que esta opção é relativa ao template.

Eu posso customizar todas as opções do swfupload?

Sim, usando o plugin você consegue usar os eventos do plugin que são análogos a vários eventos do swfupload, a diferença é que eles são acionados depois da interface gerada, sendo assim você pode personalizar e executar as ações que desejar

Eu fiz download do plugin e o arquivo upload.php não tem nenhuma lógica de realizar upload, o que aconteceu?

O script upload.php simplesmente prova que a cada upload realizado o script é chamado. O script pode ser escrito em diferentes linguagens de servidor e é assumido que quem esteja utilizando este plugin tem algum conhecimento prévio com envio de upload e o está utilizando para melhorar a experiência do usuário que é prejudicada com o upload de arquivos ormal. Se tiver algum exemplo de implementação do script de upload, por favor, entre em contato

 
Gostaria de anunciar o lançamento da versão 1.0 beta do plugin que desenvolvi, o jqswfupload. Este plugin atende a uma evolução do plugin que desenvolvi que ajudou muita gente a implementar upload múltiplos utilizando o swfupload. Ele se tornou obsoleto com a versão 10 do flash player, que mudou a forma de como enviar requisicoes ao flash atraves do javascript usando elementos html. Desta vez desenvolvi um plugin usando as versões mais nova do jQuery e do próprio swfupload que corrige este problmea com o flash player 10 e ainda funciona com players após a versão 8. O plugin é totalmente customizável e gera toda a interface de upload em uma só linha. O plugin possui opções próprias além de ter todas as opções do swfupload aptas para serem modificadas.

Houve também muito cuidado para preservar uma ótima experiência do usuário. A interface foi baseada no upload de fotos do Flickr.

O plugin terá novas versões em breve com melhorias contínuas e até a possibilidade de criar extensões para fazer upload de imagens com opção de edição como redimensionar e cortar.

Documentação

Os requisitos para o funcionamento do plugin estão listado abaixo:

• jQuery v1.3.2
• SWFUpload v2.1
• jQuery UI 1.7 (usando somente o efeito de highlight)

Suporte:

• IE 7+
• Chrome 1+
• Firefox 3+
• Safari 3+

* Não houve teste no IE6

Utilização

Primeiro, você deve incluir o plugin e suas dependências:

 <link type="text/css" href="jquery.jqswfupload.css" rel="stylesheet" />

<script language="JavaScript" type="text/javascript" src="libs/jquery-1.3.2.min.js"></script>

<script language="JavaScript" type="text/javascript" src="libs/jquery-ui-1.7.1.custom.min.js"></script>

<script language="JavaScript" type="text/javascript" src="libs/swfupload.js"></script>

<script language="JavaScript" type="text/javascript" src="libs/jquery.jqswfupload.js"></script>

Esta ordem é importante para que o plugin possa funcionar corretamente.

jqswfupload usa a biblioteca swfupload em conjunto com o jQuery. Então ele sobrescreve um simples input de arquivo com um sistema de upload múltiplos baseado em flash que possui todo o controle de progresso e tamanho do arquivo.

A marcação mínima para que o plugin possa funcionar está listada abaixo:

 <div id="upload-container">

<form action="upload.php" method="post" enctype="multipart/form-data">

<div id="upload-placeholder">

<input type="file" name="Filedata" />

<input type="submit" value="upload" />

</div>

</form>

</div>

Com esta marcação você pode invocar o plugin com as seguintes opções:

$("#upload-container").jqswfupload({
onFileSuccess: function(file,data,response) {

//execute when happen the upload file success

},

onFileError: function(file,code,message){

//execute when happen the upload file error

}

},

{

upload_url:  './upload.php'

});

O plugin aceita dois objetos como parâmetros, o primeiro são as opções do plugin como um objeto literal e o segundo um objeto de settings do swfupload.

 $('container').jqswfupload(Object plugin_options, Object swfupload_options);

Opções do Plugin

• container (padrão: #upload-container) : O seletor de contexto de onde o plugin age. Pode ser um id ou classe do formulário onde o input do tipo file está localizado.
• total_size (padrão: 5 MB) : O tamanho máximo da fila total.
• message_delay (padrão: 3000) : O tempo em milisegundos que as mensagens de aviso ou sucesso permanece na interface.
• columns (Padrão: Object) : O objeto com o texto padrão das colunas. As chaves do objeto são file, size and action que referenciam ao arquivo, tamanho e ação (remover arquivo). Quando uma das opções é passada, é obrigatório que você especifique as demais.
• messages (padrão: Object) : O objeto com mensagens padrões. As chaves atualmente são file_size_limit, file_already_exist, browse_upload e start. Quando uma das opções é passada, é obrigatório que você especifique as demais.
• onFileSucces(file,data,response) : O callback invocado a cada sucesso do arquivo
  • file: Um objeto que carrega informações do arquivo, como nome, tamanho e um identificador único
  • data: Os dados enviados ao servidor
  • response: A resposta vinda do servidor. Esta é a resposta dada pelo script de upload e você pode retornar json, xml ou pedaços de html para serem tratados.
• onFileError(file,error,message)
  • file: Um objeto que carrega informações do arquivo, como nome, tamanho e um identificador único
  • error: O código de erro do arquivo
  • message: A mensagem de erro

Opções do swfupload

• upload_url (padrão: ../upload.php ): A url relativa ao plugin
• flash_url (padrão: libs/swfupload.swf) : O caminho do arquivo swfupload.swf relativa ao local onde o script é chamado
• button_placeholder_id (padrão: upload-placeholder): O id do elemento que será substituído pelo upload em flasho, geralmente o input id ou uma div pai do input do tipo file
• post_params (Objeto) : Dados adicionais para serem enviados junto com o post do arquivo. Neste post você pode enviar dados de formulário, identificadores de sessão etc. Ele segue o seguinte formato:

post_params : { 

   "post_param_name_1" : "post_param_value_1",

   "post_param_name_2" : "post_param_value_2",

   "post_param_name_n" : "post_param_value_n"

},

Para uma completa referência das opções do swfupload, veja a documentação do swfupload

Dúvidas frequentes

Aqui está uma lista das dúvidas frequentes que podem ocorrer ao utilizar o jqswfupload:

Qual a vantagem deste plugin em relação a utilizar o swfupload sozinho?

SWFUpload é uma ótima biblioteca utilizada amplamente em grandes projetos para realizar uploads múltiplos. Ela torna fácil a integração do flash com a interface web que não seja puramente nesta tecnologia. Entretanto, o swfupload tem muitos eventos, callbacks e opções que permite a flexibilidade para o desenvolvedor criar a experiência completa de upload utilizando javascript para criar todo o dom necessário para fazer isto acontecer. Este plugin é baseado na experiência do usuário utilizada no upload de fotos do Flickr. Toda a interface pode ser customizada por CSS. Com algumas vantagens, o jqswfupload estende as funcionalidades do swfupload, como progresso geral de arquivo e limitação de tamanho máximo da fila, não simplesmente limitar o tamanho de um único arquivo. O plugin foi construído para tornar este tipo de upload da "maneira jQuery de ser" que com uma linha você pode ter tudo funcionando e você tem o objeto de opções para ter o poder de mudar de acordo com sua necessidade.

O upload retorna um erro 404, o que pode ser isto?

Provavelmente a opção upload_url do swfupload não está correta. Não se esqueça de tornar o link absoluto ou relativo ao caminho do plugin.

Eu segui todos os passo na documentação, mas aina aparece um input de arquivos normal, o que pode ter acontecido?

Provavelmente você não colocou corretamento o arquivo swf ou não modificou a opção flash_url. Não se esqueça que esta opção é relativa ao template.

Eu posso customizar todas as opções do swfupload?

Sim, mas não é recomendado para esta primeira versão modificar os eventos, por que eles irão sobrescrever os eventos do plugin. Estou realizando o trabalho de estender todos os eventos do swfupload para o plugin para estender as opções existentes sem sobrescrever os eventos atuais. Por enquanto você pode usar os callbacks onFileSuccess e onFileError.

Eu fiz download do plugin e o arquivo upload.php não tem nenhuma lógica de realizar upload, o que aconteceu?

O script upload.php simplesmente prova que a cada upload realizado o script é chamado. O script pode ser escrito em diferentes linguagens de servidor e é assumido que quem esteja utilizando este plugin tem algum conhecimento prévio com envio de upload e o está utilizando para melhorar a experiência do usuário que é prejudicada com o upload de arquivos ormal. Se tiver algum exemplo de implementação do script de upload, por favor, entre em contato

Neste post irei demonstrar a regra de negócio por trás do SWFUpload, uma biblioteca javascript usada para controle de upload de arquivos no Browser utilizando o Flash. Ela controla o lado cliente enquanto o desenvolvedor a utiliza de uma forma extensível com a interface com o usuário. Em posts anteriores eu mostrei como esta interação pode ser feita com o jQuery, e muitas dúvidas surgiram de como receber os arquivos no lado servidor. Irei demonstrar utilizando o PHP com a framework CakePHP em como manipular os arquivos.

Foi utilizada o componente do cakePHP para este propósito.

Primeiramente, para acessar os arquivos no server-side utilizando PHP, temos basicamente o seguinte código:

$_FILE['Filedata'];

Sim, é a mesma forma como é recebido arquivos no server utilizando o input do tipo file. Esta biblioteca é totalmente não-obstrusiva. Você trata da mesma forma como trataria se o Javascript não estivesse habilitado. A diferença aqui é que ele faz a chamada para o script server-side a cada interação de upload, permitindo que seja feito múltiplos e com controles que não são possíveis com o upload padrão do formulário, como barra de progresso e tamanho do arquivo.

ler artigo completo

Boa noite pessoal. Gostaria de compartilhar com todos o momento que estou passando, mas isto vai ter que ficar para outro momento. Estou vendo as estatísticas dos termos pesquisados para entrar no blog e estou aflito! Tem muita gente buscando solução para upload de arquivos múltiplos! Devido a mudanças no jQuery que eu nem previa (o plugin interface, um dos melhores para jQuery ter sido abandonado e passado a ser padrão o jQuery UI o script que fiz não sei como funciona com outras versões do jQuery. A biblioteca SWFupload mudou muito também e melhorou muito e estou desenvolvendo baseado nela. O jQuery UI Uploader é a solução ideal para upload, mas não sei por que motivo ela não está tão bem documentada e tem dados muitos problemas.

Então mãos à obra!

Este post está depreciado, favor ler o post:

jqswfupload - jQuery e swfupload em uma única linha

Desculpe a demora para voltar a escrever, estava atolado de projeto e como prometi, estava desenvolvendo um script para o jQuery em conjunto com a biblioteca SWFUpload. Bem, para quem não sabe sobre o que estou falando, há posts que contam como tudo começou:

• Jquery, Mootools e múltiplos uploads - parte 01
• Jquery, Mootools e múltiplos uploads - parte 02

Descobri o SWFUpload que é uma biblioteca bastante completa e que faz todo o background do processo. Então você tem vários parâmetros e callbacks que podem ser usados da maneira que preferir. Como já sou acostumado com o jQuery, resolvi usá-lo para fazer a parte do callback, ou seja, toda a interface que o usuário experimenta.

Devido as limitações do Javascript, da própria maneira de como é feito o upload de arquivos, temos que reconhecer que este sistema de uploads é uma revolução. Exagero? Como vocês faziam sistemas de uploads de arquivos antes? De cinco em cinco? usando iframe? Enviando os arquivos via FTP? E quando se trata de um sistema que será usado para um cliente?

Apesar de exisitir alguns plugins para o jQuery que tem esse objetivo, confesso que a maioria deles não tem a versatilidade e o poder oferecido pelo fancy upload, desenvolvido para o mootools. Os plugins que mais se aproximam para o jQuery são o Multiple File Upload, que é bom, mas não é versátil e o que ele faz é inserir campos de arquivo escondido e deixar para o usuário somente o registro do arquivo que foi escolhido. No lado do PHP estes campos serão tratados como arrays, bom, mas nada versátil e possui todas as limitações já existentes, uma delas é que você não sabe o tamanho do arquivo até ele ser jogado temporariamente no servidor. O outro é o jqUploader, que é desenvolvido em Flash, sendo assim, o jQuery faz a inserção on the fly do swf, mas a interface e o processamento é todo em flash. O SWFUpload triunfa por que ele usa o flash, mas você não sabe que está sendo usado. Pelo fato do Action Script possuírem classes que manipula arquivos de uma maneira bem mais versátil que o Javascript, além da classe external interface, que deixa o flash interagir com o html externo, esta biblioteca usa essas ferramentas para devolver ao desenvolvedor as respostas para serem usadas adequadamente.

Ao script

O SWFUpload oferece diversos callbacks para serem usados, ele pode ser manipulado por javascript. Usei o jQuery em conjunto com o plugin interface para oferecer uma experiência rica para o usuário fazer o upload de arquivos, como no Flickr.

Havia prometido um plugin, mas com um script ele poderá ser explicado e assim personalizado da maneira que acharem melhor.

Exemplo da interação do SWFUpload com o jQuery

A tarefa do SWFUpload

O trabalho do SWFUpload, como falado anteriormente é processar todos os dados utilizando o action script e devolver estes dados em tempo real para o ser manipulado via javascript.

Portanto, os scripts que precisam ser inseridos no cabeçalho são:

• SWFUpload.js - o script em si, retirado do site, aqui ele está compactado, mas no site tem ele completo e a versão mais atual
• SWFUpload.swf - O arquivo flash que faz o processamento, aconselho colocar no mesmo local do script acima, mas isto pode ser customizado.
• init.js - O script que cria o objeto da classe, com as configurações e a referência aos callbacks necessários
• callback.js - É onde eu entro utilizando o jQuery para facilitar a sua vida :-).

O arquivo que precisa de explicação pela parte do SWFUpload é o init.js que instancia o objeto e o inicializa. Ele permite várias configurações. Todas elas estão na sua documentação. Vou tentar descrever o que usei para fazer este script:

var swfu;
 
var init_uploader = function()
 
{
 
swfu = new SWFUpload({upload_script : '../upload.php',
 
target : "container_arquivo",
 
flash_path : 'swfupload/SWFUpload.swf',
 
allowed_filesize : 30720, // 30 MB
 
allowed_filetypes : "*.*",
 
allowed_filetypes_description : "todos arquivos...",
 
browse_link_innerhtml : "Procurar",
 
upload_link_innerhtml : "Enviar arquivos",
 
upload_file_start_callback : "inicioUpload",
 
browse_link_class : "btn_procurar",
 
upload_link_class : "btn_upload",
 
upload_file_cancel_callback : 'cancelado',
 
upload_file_queued_callback : "entrouFila",
 
upload_progress_callback : "progresso",
 
upload_file_complete_callback : 'terminoArquivo',
 
upload_queue_complete_callback : "fimDownload",
 
upload_error_callback : 'uploadError'	});
 
swfu.loadUI();
 
};
 
//please use better handler attachment than this:
 
window.onload = init_uploader;

Acho que não precisa de muitas explicações, por que as funções já falam por si. Eu especifiquei as funções que serão usadas no callback.js para manipular as respostas, como por exemplo, quando seleciona um arquivo, quando inicia um download e a barra de progresso, todas elas aceitam alguns parâmetros, entre eles o objeto file, que tem várias propriedades, como o id que é uma identificação única do arquivo e graças a ele temos total controle do que está sendo feito com o arquivo. O arquivo upload.php é o script de servidor que faz a manipulação e copia para o local desejado, ele pode ser acessado via $_FILE['Filedata']. A diferença desse para os plugins do jQuery que faz a manipulação dos uploads, é que não será manipulado por um array de arquivos, mas sim será chamado o upload.php para cada arquivo, ou seja, será enviado um por um da fila e seu controle será feito em tempo real, assim como a resposta para o usuário.

Este script é mais geral, você pode especificar os tipos de arquivos desejados. O bom nisto é que a caixa de diálogo exibida pelo flash você acessa o sistema de arquivos do cliente, mas só exibe os arquivos do formato especificado.

É hora do callback!

O arquivo callback.js possui toda a manipulação necessária e a inserção on the fly da lista de arquivos, nome, tamanho, botão de remover, barra de progresso etc. Tudo é feito via jQuery e com os efeitos do plugin interface.

Dê uma analisada no html, pois alguns elementos são essenciais para o funcionamento, pois através dele o jQuery faz inserções de conteúdo on the fly.

O arquivo css encontra-se abaixo e pode ser personalizado:

/* Upload de arquivos */
 
body {font-family: Arial, Helvetica, sans-serif;
 
font-size: 12px;
 
}
 
#wrapper {
 
width: 600px;
 
margin: 20px auto;
 
border: 1px solid gray;
 
background-color: #FFFBEF;
 
}
 
#wrapper h2 {
 
text-align: center;
 
background-color: #3E458F;
 
width: 100%;
 
color: white;
 
padding: 12px 0;
 
}
 
#contentContainer {
 
width: 300px;
 
height: auto;
 
margin: 10px auto;
 
background-color: #FDFFEF;
 
border: 1px solid #9F8181;
 
padding: 20px;
 
}
 
#container_arquivo {
 
padding: 10px 6px;
 
margin: 8px auto;
 
}
 
#lista li {
 
width: 90%;
 
height: 75px;
 
margin: 12px 0;
 
padding: 6px;
 
background-color: #DBDFC3;
 
list-style-type: none;
 
}
 
#lista li a {
 
display: block;
 
}
 
.msg_fim_upload {
 
text-align: center;
 
color: red;
 
font-weight: bold;
 
padding: 5px;
 
background-color: #FFE7DF;
 
}
 
.btn_procurar, .btn_upload {
 
padding: 4px;
 
background-color: #E0E3EF;
 
border: 1px solid #74798F;
 
margin: 10px;
 
text-decoration: none;
 
}
 
.btn_procurar:hover, .btn_upload:hover {
 
background-color: #DFDFDF;
 
}
 
.arquivo {
 
font-weight: bold;
 
color: #6F3039;
 
}
 
.campo_peq {
 
border: 1px solid gray;
 
font-size: 10px;
 
background-color: #E5EFE0;
 
margin: 6px 5px 0 5px;
 
}
 
.barra {
 
background-color: green;
 
color: white;
 
width: 1px;
 
margin: 4px 0;
 
border: 1px solid gray;
 
text-align: center;
 
display: block;
 
}
 
/* fim do upload de arquivos */

Alguns dessas estilizações são para a demonstração online e outros são para o funcionamento adequado do script.

O script foi testado no Firefox 1.2.xx, no IE6 e IE7. Nestes dois últimos, há uma pequena falha na animação, mas devido ao interface. Se não gostou do resultado do efeito, ele pode ser alterado pelo callback nas linhas que tem os métodos Grow(crescer) e Shrink(encolher).

Espero que tenham gostado e que façam bom proveito deste script e qualquer dúvida, estou a disposição.