Logo do jqswfupload
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.

Ver exemplo do jqswfuploadMake the download of the jqswfupload

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:
[sourcecode language=”html”]

 

 

 

 

[/sourcecode]
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:
[sourcecode language=”html”]

[/sourcecode]
Com esta marcação você pode invocar o plugin com as seguintes opções:
[sourcecode language=”javascript”]$(“#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’

});

[/sourcecode]
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.
[sourcecode language=”js”] $(‘container’).jqswfupload(Object plugin_options, Object swfupload_options);

[/sourcecode]

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:

[sourcecode language=”javascript”]

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”

},

[/sourcecode]

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

47 Replies to “Upload de arquivos com jqswfupload”

  1. Muito bacana… axo que está acontencendo erro 407, talvez seja por que estou atras de um proxy.

    Outra coisa, vc disse a cima que é possível costumizar o layout, pode mudar tambem o progress bar igual ao do FancyUpload?

  2. Tenho um arquivo de 250 MB em media para ser enviado ao servidor eu realizo somente a mudança na variavel total_size? do arquivo jquery.jqswfupload.min.js e também no jquery.jqswfupload.js? Poderia me ajudar?

  3. Mais uma pergunta Alexandre. Consegui resolver a questão do tamanho de 250MB, mais agora quando eu envio qualquer arquivo maior do que 10MB simplesmente ele retorna null no resultado. Pode me ajudar, ficarei no aguardo? Fique com Deus.

  4. @Carlos: verifique se o servidor tem alguma limitação de tamanho, por que esta limitação configurada no plugin é para o tamanho total e por arquivo tem uma opção do swfupload. E quando modificar não mexa no min, ele é apenas o plugin compactado para você poder ter um arquivo menor.

    Verifique as limitações de tamanho no server.
    Abraços e boa sorte…

  5. Alexandre. Primeiro gostei bastante do plugin, ajuda muito. Gostaria de dar uma opinião sobre o funcionamento.
    1 – Quando selecionamos o arquivo (um somente) e solicitado o inicio da operação e se nesse clicarmos em ação para cancelar o item ele cancela e volta a inicio da operação sem nenhum item a ser enviado. Certo?
    2 – Agora com nada de itens a ser enviado volto e seleciono outro arquivo pode ser o mesmo só para exemplo se o arquivo é de 478.52 MB ele duplica para 957.03 MB e diz 2 Arquivo(s), mas tendo somente um arquivo, e a barra de progresso começa a marcar no ponto onde cancelei que é 57%. E com isso peço para realizar o envio, ele simplesmente passa dos limites dos 100%.
    Mas resumindo, eu tentei explicar um pouquinho. Mas faz o teste direitinho pra ver.
    Aqui vai um explicação resumida. Ao clicar no item de cancelar objeto enquanto esta enviando. Ele simplesmente dará problema para o próximo envio.
    Possivel solução: Desabilitar a opção de exclusão do item, enquanto estiver no status “enviando”.
    É isso… Fique com o Senhor Jesus Cristo!!!!

  6. A esqueci de falar.. Em arquivos muito pequeno é dificil realizar essa operação que lhe falei. Mais tente em arquivos de 50 Mb e verá..

    Jesus ama muito você!!

  7. @Carlos: Ela esta na funcao swfupload_loaded. Aconselho não mexer no código fonte para alterar isto, estou desenvolvendo para a nova versão uma forma de poder configurar todos os callbacks via plugin. Abraços e boa sorte…

  8. Alexandre. Olá, joia? Gostaria de partilhar uma idéia: Que tal uma opção de limpar todos uploads enviados, e que não “escondesse” a tabela. Pois nessa caso quando peço um novo arquivo. Simplesmente começa a contar com os outros que já tinha enviado e o outro que quero enviar por último. Mas na verdade é somente um que quero enviar, pois os outos já foram enviados! Veja aí. Abração, e fique com DEUS!

  9. Alenxadre. Como eu faço pra mudar o conteudo da a variável swfuploadrnd? No meu caso tenho a necessidade de alterar esse conteudo de modo dinâmico. Por exemplo, quando clicar em um botão o conteudo da variavel é atualizado! Mudando o flash atual. Tem como?

    plugins_internos/upload/libs/swfupload.swf?swfuploadrnd=700431758

  10. Olá Alexandre. Gostaria de saber, quando você disponibilizará a nova versão? Estou esperando aquelas correções hein.. Essa variável fica no objeto flash que é adicionado no html quando é aberto a página swfuploadrnd=( id randomico gerado ) eu preciso mudar esse id de forma dinamica, pois sempre que eu enviar um video todos os dados do video fica na tela. Daí tenho 2 opções fazer um reflash da página ou alterar o id e form dinamica e apagar todos os dados da tabela de upload. O que me indica? Até porque estou te perguntando quando sairá a nova versão.

  11. @Leonardo: os arquivos não são enviados ao mesmo tempo, a cada arquivo da fila é chamado o arquivo de upload especificado.

    @Carlos: Estou trabalhando já na nova versão, estou fazendo algumas mudanças estruturais que vai ficar mais fácil a utilizaçãoe e criando testes automatizados para garantir um melhor funcionamento do plugin. Enquanto ao que você está querendo não sei se como está fazendo é a melhor solução, talvez seja melhor você repensar, pois este id é o identificador da instância do swfupload. Abraços e espero poder lançar a nova release ainda este mês…

  12. Gostaria de saber se é possível enviar junto os arquivos $_FILES algumas query. Por exemplo, quero definir dinâmicamente para qual pasta irá as fotos, dessa forma passaria a query folder=talpasta. Isso já esta implementado, ou não há possibilidade de fazer?

  13. quanto a duvida de Paulo Freitas tem sido a minha tambem. Como podemos ter um campo do tipo hidden e o conteudo desse campo ser resgatado como um POST em upload.php? voce fala que é atraves de post_params, mas o post_params que fica no arquivo main.js, e só aceita valores strings simples, na forma “nome” : “valor”, onde valor só consigo deixar um dado fixo. Nao funciona por exemplo “nome” : valor (variavel)

  14. Consegui o que queria fazendo isso no post_params:

    ‘pasta’ : $(‘#pasta’).text()

    onde no form criei uma div assim:

    resolveu meu problema, pois o upload.php recebeu como uma variavel post o valor em $pastachave:

    echo “pastachave: “.$_POST[‘pasta’];

  15. Olá! Primeiramente, parabéns pela iniciativa! Deve ter sido um empenho e tanto!

    Uma dúvida. Estou com um problema. Toda vez que subo um arquivo, ele diz que excedi o tamanho permitido. Engraçado que os arquivos são de 800bytes a 49kb… são pequenos. Aumentei o maxsize, mas não adiantou nada.

    fileSizeLimit : “30000”
    totalSize: ‘5 MB’,

    e ele sempre cai no warning do file_size_limit.

  16. Oi Alexandre! Estou com uma dúvida… na página que faz o upload, eu renomeio o nome dos arquivos através de PHP, inserindo um código, tirando espaços em branco e tal… eu gostaria de capturar o mesmo na página do formulário. Eu só consegui pegar o nome original da imagem, não o “tratado”.

    Nome original: file.name
    Nome tratado: ?

    Pensei em usar o response, porém não faço a minima ideia de como criar isso! Pode me ajudar?

  17. @Maykel: você precisa usar o response, pois nele você retorna as informações do processamento no servidor. Neste caso você trata a imagem e depois de verificado que ela foi movida com sucesso e com seu nome “real” você pode enviar estas informações no response através de json ou xml para ser usada no lado cliente. Espero ter ajudado e boa sorte.

  18. Alexandre, boa noite. Estou começando a fazer alguns testes com os scripts hospedados num provedor; escolho os arquivos; quando clico no botão “enviar”, ele vai mostrando o nome de cada arquivo com a palavra “Erro” e o código 500 , e aí não faz nenhum upload . Qual é o significado deste erro 500 ?

  19. @Renato: Pode ser problema com url, referência… o erro 500 é um erro interno no servidor. É um erro bastante genérico para identificar o problema. Tente ver o log do servidor. Abraços e espero ter ajudado.

  20. Galera alguem pode me ajudar por favor eu coloquei o seguinte campo mas não puxa o valor no upload.php

    $nome

    coloquei isso no post_param post_params: {‘codigo’ : $(‘#codigo’).text()}

  21. Alexandre, aonde cai as imagens upadas? eu coloquei a pasta que baixei do seu site em meu servidor, ele upa as imagens normalmente, só não sei qual pasta as imagens vai parar, o que devo fazer? preciso sa dua ajuda :z

  22. Alexandre, primeiramente parabens pelo plugin. Estou com uma duvida, no meu caso, esta aparecendo um erro de java com relação ao arquivo main.js, na linha 5. Fala de um objeto não identificado. O arquivo main.js não foi modificado, eu upei meus arquivos em outra pasta e funcionou perfeitamente, mas na raiz da esse erro. Ja chequei os links, ta tudo ok. Abraço!

  23. Olá Alexandre, parabéns pelo script, muito jóia.

    Mas me acorre uma dúvida, tem como limitar quantidade de arquivos selecionados? Por exemplo, limitar o quantia de 6 arquivos para envio, é possível?

    Obrigado desde já, e sucessos em 2011!

  24. @Vilson: Existe uma opção file_upload_limit que você limita a quantidade de arquivos. Estou indo postar sobre um novo plugin para upload que desenvolvi usando o jQuery UI e provavelmente este será descontinuado. Espero que tenha ajudado, abraços.

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *