Webpoint

Weblosofia com CSS, Jquery, Javascript, Ajax, PHP etc.

por Alexandre Magno

Home
Contato

SWFUpload e jQuery

Postado em Setembro 26th, 2007 por Alexandre Magno

projetos jQuery, SWFUpload e Jquery, Jquery

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:

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.

Artigos relacionados

Comentários

Assine o RSS para comentários

drikun comentou:

26th Setembro, 2007 às 2:13 pm

nossa, ficou mt legal seu exemplo, quando chegar em casa vou testar concerteza

Tenho algumas perguntas:

1- Até hoje nao consegui entender como funciona o loadUI() do SWFUpload!! Sera q vc pode me explicar como funciona exatamente?

2- Estou pensando em usar alguma library de JavaScript no meu projeto! Preciso mt dos seletores de elementos, do tipo: PEGUE OS ELEMENTOS “X” QUE POSSUEM A CLASSE “Y” e ID “Z”.
Pensei em usar o Mochikit ja que os nomes que ele usa segue uma semantica mt boa que estamos acostumados. Mas estava olhando o JQuery e o MooTolls e achei bem interessante tb, e a semantica dos dois sao bem parecidas, mas ainda prefiro a do Mochikit! A pergunta é a seguinte: Qual Library vc me recomendaria e pq? Existe alguma vantagem em usar uma ou outra, ou depende mesmo do desenvolvedor?

Vlw cara.. otimo trabalho!

admin comentou:

26th Setembro, 2007 às 2:47 pm

Creio que o loadUI seja para carregar a interface do swfUpload, ou seja, os botões, e o flash do background depois de ser instanciada a classe, mas não tenho certeza, pois já pesquisei e nunca achei algo a respeito.
Cara, eu uso o jQuery para tudo, já tentei usar outras, mas me senti confortável e tudo flui mais facilmente para mim com a jQuery. Então sou suspeito para falar. Acho bom você experimentar e ficar com a que você tem mais facilidade e tem mais vantagens para você. O jQuery tem vantagens que eu buscava como separação de javascript e html, sem utilização de eventos inline, isto eu gostei bastante, além da grande variedades de plugins, que ajuda ela a ser bastante estendida. Pelo que você está falando, esta lógica de pegar o elemento tal da com a classe “X” é típico do jQuery, outras possuem lógicas assim, mas o jQuery funciona baseado nisto, pegar os elementos e executar médodos e eventos com eles. E já escrevi posts comparando o jQuery com a prototype, mostrando que para muitas coisas o jQuery gasta menos código. É uma escolha que tem que ser feita e a única pessoa que tem de escolher é você. Elas estão aí para ajudarem e não para competir, tem frameworks para todos os gostos e isto é bastante pessoal, portanto, experimente e descubra qual foi feita para você.

Pedro Wallauschek comentou:

28th Setembro, 2007 às 2:37 pm

Parabéns Alexandre excelente Plugin! Vou te dizer um dos mais interessantes e desafiadores q já vi sobre Jquery….
Parabéns…
Como posso fazer pra passar uma variável junto com o upload.php criada na pagina onde se carrega todos os js?
Agradeço desde já….

admin comentou:

28th Setembro, 2007 às 3:20 pm

Muito obrigado pedro…

Não endendi direito sua pergunta, você quer passar outras variáveis para o arquivo upload.php??? abraços…

Pedro Wallauschek comentou:

28th Setembro, 2007 às 4:02 pm

Exato leandro…. eu criei uma session e chamei ela no upload.php funcionou só no ie… oq eu quero é passar para o upload.php o id q veio no get da página onde tá o sisteminha de upload….

José Manuel de Caires comentou:

3rd Outubro, 2007 às 12:15 pm

Muito bom todou o plug in y muito obrigado eu quero me desculpe o meu portugues as malo todou isto es porq eu so do venezuela y meus avous son no portugal Então eu no se muito escrivir no portugues, la idea es eu necessito saber o que tene u arquivo da php eu penso que en el arquivo tene que tener as funciones associadas a $_FILE u problema es que isto ya eu tenho feito y nada não passa os arquivos para meu servidor

admin comentou:

3rd Outubro, 2007 às 2:22 pm

boa tarde José Manuel, sem problema em relação ao seu português, consegui entender tranquilo, me diga uma coisa, vc está tentando acessar o arquivo por $_FILE[’Filedata’]?

abraços…

José Manuel de Caires comentou:

3rd Outubro, 2007 às 3:05 pm

Muito obrigado por a resposta Agora eu logre fazer la subida do arquivo porém eu tenho dois problemas o primero é que eu quero fazer somente uma sola subida da arquivo não multiples
u segundo é que eu quero passar uma variável junto com o upload.php já que eu neccesito fazer um query base de dados muito obrigado eu não esperava a sua resposta tão rápido

admin comentou:

3rd Outubro, 2007 às 5:30 pm

Bem, se quer enviar somente um arquivo, basta inserir um só, cada arquivo inserido será chamado o upload.php.

Outros usuários estão tendo problemas para passar as variáveis para o upload.php, em relação a isto vou ficar te devendo e vou pesquisar a respeito e assim que descobrir eu te falo, mas que tipo de variável você quer passar?? Todas as informaçoes do arquivo podem ser passadas e assim serem inseridas no banco , copiadas etc… espero poder ter ajudado, pode contar comigo para o que precisar, abraço…

admin comentou:

3rd Outubro, 2007 às 7:03 pm

Para todos que tem a dúvida sobre como passar variáveis para o arquivo upload.php, aqui vai um truque, não uma solução, mas funciona hehehe…

Se você for passar via get, no head do documento crie uma variável javascript que irá conter o as variáveis com os seus valores em código php, por exemplo:

var valores_get = 'upload.php?variavel=' + '< ?php echo $variavel; ?>‘;

E no javascript externo você especifica essa variável no upload_script do swfupload.

Via post é possível por ajax, principalmente se for pegar dados de um formulário, mas isto fica para o plugin do jQuery e o assunto do próximo post.

Espero ter ajudado a todos e se precisarem, estamos aí…

José Manuel de Caires comentou:

4th Outubro, 2007 às 9:35 am

Muito obrigado,
porém eu e pesquisado a he consegui que as links y todo isso se faze desde js por isso es que eu estuve pensando a que se pode fazer desde u swfupload.js criar um input type hidden y atribuirle um valor y depois tomar u valor na upload.php com post não sei si isto pode funcionar u otro is que eu necesito so que a usuário não pode subir mais de um arquivo so um

admin comentou:

4th Outubro, 2007 às 9:48 am

Valores do tipo hidden acho que podem ser acessados por $_POST.

Para limitar para apenas um download, você terá que personalizar os callbacks que eu criei, dê uma olhada nesta documentação http://swfupload.mammon.se/documentation.php#upload_file_queued_callback

O parâmetro queuelength controla quantos uploads entram na fila, assim você pode limitá-lo para um e usar dentro do script, como por exemplo um alerta de que só é possível adicionar um e cancelar todos que ele adicionar se ultrapassar o valor permitido, neste caso o 1.

Espero ter ajudado, abraços…

Jean Marcel comentou:

9th Outubro, 2007 às 1:58 pm

Alexandre, mto bom. Era algo exatamente assim que estava procurando. Porém eu consigo fazer o upload com ASP? como seria o resgate e o upload de fato dos files enviados para um arquivo upload.asp? Abraço

admin comentou:

9th Outubro, 2007 às 3:24 pm

Boa tarde Jean, você consegue sim fazer com asp, basta você saber que o input file tem o atributo name de ‘Filedata’, então é só usar o script de servidor normalmente, que ele será chamado para cada upload e não como um array de arquivos.. se precisar é só falar… abraços…

Tiago Soczek comentou:

10th Outubro, 2007 às 12:40 am

Cara, parabéns pela implementação, já sou fascinado pelo JQuery, e agora pelo SWFUpload,

Vou ver se crio um componente p/ ASP.NET que implemente a sua solução!

Abraços!

admin comentou:

10th Outubro, 2007 às 9:12 am

Obrigado tiago… fico feliz que tenha gostado e que o script tenha sido útil, um abraço…

João comentou:

22nd Novembro, 2007 às 10:04 am

Bom dia, Alexandre!

Demais o artigo e a solução! Estive estudando a técnico durante 1 dia inteiro (hhehehe, sou lento), mas o que realmente está incomodando é que manuseando upload (buscando arquivos, enviando, buscando outros e enviando) o firefox simplesmente quebra! Estou usando a versão 2.0.0.9.

Recebeu algum tipo comentário sobre isso? Agora estou estudando a API do Flash pra tentar descobrir o que pode estar acontecendo…

Fora isso, parabéns!
Se precisar algo, é só chamar no gtalk…
Abraços

João comentou:

22nd Novembro, 2007 às 10:09 am

Alexandre, esqueci de mencionar que uso kubuntu que faz toda a diferença no comportamento do firefox…

Diego comentou:

23rd Novembro, 2007 às 2:19 am

Muito bala o teu exemplo, é oque eu mais queria, parabéns!
Estou usando ASP com o componente aspSmartUpload.SmartUpload para o upload, li nos comentários acima q tem q pegar o ‘Filedata’… não consegui fazer funcionar… já conseguiu fazer funcionar com o ASP? Valeu, parabéns pelo artigo.!

admin comentou:

25th Novembro, 2007 às 2:53 pm

@João: O que você quer dizer com quebrando??? Assim eu posso saber melhor do que se trata. Abraços.

@Diego: Em alguns comentários atrás já teve algém que tentou implementar no ASP. Tente olhar se os caminhos estão corretos, pois os arquivos são enviados como um input file normal via post ‘Filedata’. Abraços…

Diego comentou:

26th Novembro, 2007 às 9:52 pm

João eu consegui arrumar, estava fazendo errado. Utilizei aspSmartUpload usando assim:
set file = mySmartUpload.Files(”Filedata”)
file.SaveAs(”../folder/” & file.FileName)

O único problema que estou tendo agora é com os arquivos acentuados, que são salvos com caracteres todos bagunçados, alguem saberia me ajudar ou como eu faço para q isto não aconteça…
valeu !

admin comentou:

27th Novembro, 2007 às 8:18 am

Não recomendo usar nome de arquivos com acentuação, o ideal seria retirá-los ao processar e salvar o arquivo…

Obrigado pela solução Diego.

João comentou:

29th Novembro, 2007 às 1:27 pm

Olá a todos!

“Quabrando” eu quis dizer que o firefox simplesmente fecha (isso só acontece no linux) quando eu faço upload de 1 ou vários arquivos. Às vezes o upload vai até o fim. Às vezes, “quebra”. Acho que se trata do plugin flash pro linux, pois testando no IE on linux, IE e firefox no windows, tudo fica perfeito. Uma pena.

Ainda não achei um “workaround” pra isso. Se souberem, por favor, me avise!

Obrigado a todos!

Jean Marcel comentou:

11th Dezembro, 2007 às 2:00 pm

Olá Alexandre,
Consegui implantar ele no ASP, está funcionando. Porém quase sempre durante o upload, ele me mostra a mensagem abaixo em uma caixa de alerta:
“A script in this movie is causing Adobe Flash Player 9 to run slowly. If it continues to run, your computer may become unresponsive. Do you want to abort the script?” quando clico em NO ele continua normalmente até o fim. Sabe o que pode ser isso?

Obrigado!

admin comentou:

14th Dezembro, 2007 às 2:49 pm

Olá Jean, este problema é devido ao fato do flash ter um limite de tempo de execução de script, provalvemente você estava enviando um arquivo muito grande. Não postei sua resposta antes por que o site do swfupload com o link para corrigir o problema está fora do ar, de qualquer forma, no site http://swfupload.mammon.se/index.php há a solução. E no fórum http://swfupload.mammon.se/forum/viewtopic.php?pid=225 também foi postada a solução para isto. Infelizmente eles ainda estão fora do ar, mas deve estarem de volta logo. Espero ter ajudado, um grande abraço!

David comentou:

27th Dezembro, 2007 às 8:00 pm

Parabéns pelo script. Adicionei uma Select junto ao Form mas não estou conseguindo passar o valor dela, poderia me ajudar?

David comentou:

28th Dezembro, 2007 às 3:28 pm

Parabéns pelo script.
Estou com um problema veja se você pode me ajudar no arquivo onde seleciono umas fotos tenho uma select, como faço para passar o valor da select para o arquivo upload, estou usando asp.

Obrigado

Marcos Timm Rossow comentou:

29th Dezembro, 2007 às 12:34 pm

Olá.
Grato pelo script! realmente surpreendente.

Estou fazendo algumas modificações e gostaria de passar algumas variáveis pro upload.php.
Vi nos comentários vc dizendo para criar uma variável e depois seta-la na variável upload_script. Porém, essas variáveis somente são populadas depois que o usuário seleciona os arquivos.
É possível setar o upload_script DEPOIS que o script flash for chamado ???
Já estou a dias tentando fazer isso e lendo documentações e ainda não consegui resolver.

Grato!

admin comentou:

2nd Janeiro, 2008 às 1:20 pm

@David: Já tentou processar o select no action do form? Também você pode pegar o valor do select via script e passar por get pelo método que está citado nos comentários, de passar por get no arquivo de upload.php se não for muitos dados. Espero ter ajudado…

admin comentou:

2nd Janeiro, 2008 às 1:22 pm

@Marcos: Por enquanto não consegui uma maneira de fazer isto, mas estou tentando, realmente nunca vi isto, mas para que você quer setar antes? Abraços…

Alexsandro comentou:

9th Janeiro, 2008 às 7:55 pm

Ae, alguem consegui resolver o problema de SESSION no FIREFOX que o Pedro Wallauschek mencionou? ta osso isto.

Pedro Wallauschek comentou:
28th Setembro, 2007 às 4:02 pm

Exato leandro…. eu criei uma session e chamei ela no upload.php funcionou só no ie… oq eu quero é passar para o upload.php o id q veio no get da página onde tá o sisteminha de upload….

Cleber Tadeu comentou:

9th Fevereiro, 2008 às 11:18 am

olá alexandre, sou iniciante do jquery, tentei utilizar o seu exemplo, carreguei os arquivos e tudo mais, só que na hora de clicar no botao procurar meu compilador diz : “this.movieElement.browse is not a function”;

chegou até travar meu browser,… rsrs.. Bom como eu acredito que esteja fazendo alguma coisa errada. Pode me ajudar estou precisando dessa dica. Obrigado

admin comentou:

12th Fevereiro, 2008 às 11:45 am

@cleber: Me parece que ele não está identificando o arquivo swf. Tente verificar o local especificado no javascript com o local que o arquivo swf está.

Antonio Marcos comentou:

14th Fevereiro, 2008 às 4:43 pm

Olá Alexandre, fascinante esse artigo, parabéns
Estou tentando acessar o site http://swfupload.mammon.se/ para baixar o swfupload, mas o link não funciona.
Você teria outro link para baixar o swfupload ou o link para baixar o código fonte do exemplo desse artigo?
Obrigado

admin comentou:

15th Fevereiro, 2008 às 11:49 am

Muito obrigado Antônio. Há algumas semanas que não está funcionando e tive este mesmo problema. Agora descobri que ele mudou de endereço e o site está de cara nova. Devem ter ficado famosos :-).

SWFUpload: http://swfupload.org/

Janick comentou:

18th Março, 2008 às 9:25 am

Fiz uma função com php que era pra criar a thumb e uma outra imagem da imagem proveniente do upload. É pra funcionar normalmente ou precisa fazer alguma alteração no sistema?
Tentei aqui mas não funciona por completo.
A função faz o seguinte:
- Cria uma pasta raiz e mais duas dentro dela. Thumb e Final.
- Renomeia as imagens.
- A partir da imagem original de upload, cria a thumb e a final (com assinatura).
- Salva dados no bd

A única coisa que a função tá fazendo até agora é criar as pastas. Nem o upload tá rolando, não entendo pq.
Se alguém puder ajudar, valeu.

Salomão comentou:

10th Abril, 2008 às 9:33 am

Olá estou tentando tentando enviar variaveis para dentro de upload.php usando a seguinte linha

// Max settings
swfu = new SWFUpload({
upload_script : “../multupload/upload.php”,
post_params: {”categoria”: “”,”name_topicos”: “”,”list_thumb”: “”,”alt”: “”,”type_galeria”: “”},

acontece que somente com essa linha a variavel não é postada.Eu só consigo enviar se registrar todas as variaveis acima na sessão e recupera-las com $_SESSION[’variavel’] dentro de upload.php.gostaria de saber como faço para postar a variavel sem transforma-la numa variavel de sessão.

Muito agradecido Salomão

admin comentou:

10th Abril, 2008 às 9:42 am

@Salomão: Você já tentou passar por query string no upload.php? (ex: upload.php?var=teste)

Nuno comentou:

24th Abril, 2008 às 5:22 pm

olá Alexandre, tudo bem? funcionou às mil maravilhas, uma pergunta como posso validar , se o user clicar enviar sem seleccionar imagem dá msg enviado com sucesso como posso uma msg de erro?

Abraço

Nuno comentou:

25th Abril, 2008 às 12:42 pm

como versão 2.1 quebrou tudo , a tua era a 1.2 correcto?

abraços

admin comentou:

25th Abril, 2008 às 5:07 pm

@Nuno: Sim nuno… a versão é 1.2… irei refazer este plugin com mais opções e usando as versões mais recentes, por que usava o interface para as animações e o jQuery 2.1 não aceita bem.

Nuno comentou:

25th Abril, 2008 às 7:14 pm

valeu Alex

Odilon comentou:

12th Maio, 2008 às 5:46 pm

Muito interessante essa ferramenta, Alexandre !
Mas não consegui fazer funcionar o envio de outras variáveis ao servidor. Mesmo a última versão do site (http://code.google.com/p/swfupload/) não está reconhecendo a função “addPostParam”.
Gerei um handler “upload_start_handler” e tentei adicionar algumas variáveis, mas o javascript chiou dizendo que a função “addPostParam” não existe.
Você conseguiu testar isso?
Abraço, Odilon

Odilon comentou:

12th Maio, 2008 às 6:19 pm

Oi Alexandre… boas novas. Para que você não perca seu tempo testando - é bug da versão 2.02. Baixei a versão 2.1.0 Beta e.. show !

Abraço, Odilon

admin comentou:

13th Maio, 2008 às 10:27 am

@Odilon: Que bom. Eu não fiz testes com as versões mais novas, mas pretendo lançar uma versão nova e deixá-lo mais com a cara de “plugin”. Abraços e boa sorte

Tudo sobre jQuery - Cleiton.net comentou:

18th Maio, 2008 às 8:17 pm

[…] SWFUpload e jQuery […]

Adriano comentou:

28th Maio, 2008 às 11:50 am

Essa ferramenta é show.
Agora tentei passar uma variavel para o upload.php pois preciso fazer o upload em pastas diferentes alem de gravar no banco de dados o nome das imagens.

Vi que vc colocou uma dica para passar a variavel atraves de javascript, mas não tive sucesso.
Vc tem como me ajudar nisso?

Abs

admin comentou:

28th Maio, 2008 às 2:07 pm

@Adriano: Tem como você me passar um exemplo mais detalhado do que está acontecendo. Analisando superficialmente pelo que você disse você colocou a atribuição da variável antes do arquivo javascript que irá utilizá-lo? Abraços…

Adriano comentou:

28th Maio, 2008 às 3:30 pm

Então… eu atribui a variavel que dentro do FORM onde eu faço a busca pelo arquivo para fazer o upload, nesse form tenho um INPUT TYPE=HIDDEN onde passo a variavel.

Dai quando mando enviar os arquivos, ele faz o upload corretamente porem o valor passado pela variavel não é atribuido e tbm não consigo inserir no BD o nome de cada imagem q estou fazendo o upload.

admin comentou:

30th Maio, 2008 às 12:05 pm

@Adriano: atribui a variável no head do documento e passe para o javascript. desta maneira:

E acesse a variável teste dentro do javascript no parametro da url passando ‘upload.php?teste=’+teste

É um truque mas funciona para esta versão do plugin. As novas versões do SWFUPLOAD permite uma manipulação melhor de passar variáveis e ficará para uma próxima versão.

Marcos comentou:

31st Maio, 2008 às 12:10 pm

Oi Alexandre, achei muito massa essa ferramenta, realmente acho uma revolução. Mas não to conseguindo fazer funcionar tinha feito tudo do jeito que se pede, ai ao rodar percebi recebi a mensagem de erro:

“jQuery.dequeue is not a function.”

Pesquisei e descobri que era um conflito com a versao do jQuery e a correção eu encontrei aqui:

http://theneubeck.blogspot.com/2007/11/jquery-interfacejs-issues.html

Pronto resolvido o problema, nao aparece nenhuma mensagem de erro no meu browser(Opera 9.27) e nem no IE7. Eu ja testei meu upload.php e tah funcionando quando eu mando input file “Filedata”. Mas quando clico em “Enviar arquivos” ele mostra as barras de status enchendo até 100% mas e da a mensagem que os arquivos foram enviados, mas olho no server e nao foram enviados. nao consigo entender onda ta o erro.

Adriano comentou:

31st Maio, 2008 às 4:41 pm

Blz, até ai tudo bem, agora como pegar essa variavel dentro do upload.php ?
quando q irá sair a proxima versão?

admin comentou:

4th Junho, 2008 às 12:47 am

@Marcos: Deve ser algo errado no servidor. Ele não retorna algum erro? Você está executando local?

Marcos comentou:

4th Junho, 2008 às 6:34 pm

Sim, to executando localmente, mas nao retorna nenhum erro, parece que tem haver com o input file. existe algum download desse sistema pre-configurado? ja com o upload.php?
vo continuar debugando aqui pra ver se axo o problema.

admin comentou:

5th Junho, 2008 às 2:21 pm

@Marcos: eu tinha um arquivo assim, mas tenho que procurar. Como isto foi muito pedido, vou fazer de tudo para disponibilizá-lo aqui no blog. A implementação que tenho dele é em cakePHP por que eu geralmente o uso nos sistemas que crio. De qualquer forma, vou colocar um padrão do arquivo php, mas basicamente deve estar havendo algo de errado no envio ou você pode verificar o log do apache para saber se efetivamente não houve nenhum erro. Espero ter ajudado. Abraços.

Roger comentou:

8th Agosto, 2008 às 5:20 pm

Não consigo pegar o arquivo “upload.php”.
Teria como disponibilizá-lo via texto?

Obrigado!

Alexandre Magno comentou:

8th Agosto, 2008 às 5:29 pm

@Roger: O scrip que desenvolvi foi feito utilizando o cakePHP. Pelo fato de ter várias opções de se processar o arquivo e fazer o upload, não disponibilizei um script de exemplo. Para conseguir manipular o upload no servidor, quem utilizar o script deve ter um pouco de conhecimento em uploads de arquivos sem esta técnica, por que o código servidor não muda, você precisa apenas acessá-lo via Filedata. Espero ter ajudado, abraços…

meire-mt comentou:

9th Setembro, 2008 às 10:21 pm

para acessar o upload.php acesse o endereço:
http://code.google.com/p/swfupload/
baixe o script completo

Felipe comentou:

14th Outubro, 2008 às 11:59 am

Muito bom cara, mas estou com um problema tipo estou usando localmente dai eu envio os arquivos todos mas queria saber como ficaria o arquivo upload.php tipo assim como eu faria para salvar na mesma pasta ? ja tentei varios tipos mas não consigo acessa o arquivo vindo do form, ja tentei $_POST[’Filedata’] etc me ajude ai vlw abraços.

Felipe comentou:

14th Outubro, 2008 às 3:44 pm

E se eu quiser agressentar mais campos input como irei pegar os campos?

Alexandre Magno comentou:

15th Outubro, 2008 às 9:21 am

@Felipe: O problema por você não estar conseguindo acessar os arquivos que foram feitos upload provavelmente é devido a url errada. Você está usando o action do form ou passando nas configurações o target do form?
Para acrescentar mais campos foi introduzida na versão mais nova postParams que envia dados via post, e estou atualizando o plugin para aceitar isto.

Felipe comentou:

30th Outubro, 2008 às 6:24 pm

Bom não consegui se puder fazer um tutorial a parte encinando eu agradeço.

Caio Mathielo comentou:

31st Outubro, 2008 às 10:35 am

Olá Alexandre,
antes de tudo, meus parabéns pelo post. O script é fantástico e eu gostei muito dos callbacks. Eu consegui fazer o script funcionar perfeitamente, exceto por um pequeno detalhe (é bizarro, veja se entenda): na minha casa o script funcionou perfeitamente no IE, mas no FF não. Aqui no trabalho foi o contrário, funcionou no FF, mas não no IE. Pedi para amigos em suas casas e o pessoal do trabalho aqui pra testar em seus computadores e não obtive nenhum padrão: em alguns computadores, funcionava em todos browsers, em outros, variava. Além de tudo, quando não funciona ele não retorna erro algum. O problema que acontece é que, quando se clica em “Procurar” para abrir a caixa de seleção dos arquivos, ela simplesmente não abre. Você tem idéia do que pode ser isso? estou revirando o código e quebrando a cabeça com isso, mas até agora não tenho idéia do que possa ser. Obrigado pela atenção, []’s.

Alexandre Magno comentou:

31st Outubro, 2008 às 3:00 pm

@Caio: Algum desses computadores não tem flash? As vezes ela não abre por falta do plugin, só que neste caso aparece o input file normal. Isto acontece também se tiver algum erro de Script, que no Firefox pode continuar funcionando e no IE qualquer erro de script impede o funcionamento de tudo. Pelo que você me falou não consigo dizer muito além disto. Estou trabalhando numa nova versão do plugin que pode melhorar isto. Abraços e boa sorte….

Daniel - DCARUS comentou:

5th Novembro, 2008 às 3:08 pm

Parabens pelo script e pela explicação.
Tenho um site de eventos e toda vez que tinha de enviar as fotos era uma por uma, agora seleciono tudo e envio de uma vez só.
Baixei o script 2.1 do site deles e dei umas adptadas para o meu caso, tipo apresentar as miniaturas das foto enviada, gravar informações no banco de dados e etc..
Tava mt tempo atraz disto. Viva o oráculo “google” que me trouxe aqui e viva a vc pela explicação..

OBS.:
Ao pessoal que usa php e não ta conseguindo enviar as variaveis via get, eu usei em dois lugares.
no script:
upload_script : “upload.php?CI=”,

e no form também:
”

funciona perfeito!!!

Abração.

Daniel - DCARUS comentou:

5th Novembro, 2008 às 3:10 pm

nao apareceu explicação do form:

form action=”down_cad_upload.php?CI=”

Alexandre Magno comentou:

6th Novembro, 2008 às 8:19 am

@Daniel: Muito bom Daniel, parabéns pela iniciativa. É assim que a gente começa a encontrar soluções. Estou trabalhando na nova versão do Script, deixá-lo totalmente compatível com o jQuery. Quem sabe você pode até dar uma força. Abraços e boa sorte!

Cleimar Lemes comentou:

17th Novembro, 2008 às 11:48 am

Gostaria de saber se tem alguma explicação para o problema que esta acontecendo, estou usando o script para envio de fotos pro servidor, mas o que acontece e o seguinte, clico em adicionar imagens, seleciono as imagens, clico em enviar ele faz o processo ate encher o 100% diz que upload completo, mas aparece um x na foto de erro e tb nao aparece erro algum pra saber o que foi, ja fiz de tudo que sabia estou usando o servidor www.kinghost.com.br nao sei o que fazer preciso de ajuda.