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:
[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”]

/*
* 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'
}
});
});

[/sourcecode]
O plugin usa um parâmetro, um objeto literal de opções
[sourcecode language=”js”] $(‘container’).jqswfupload(options);

[/sourcecode]

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)

[sourcecode language=”javascript”]

//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”

},

[/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, 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

29 Replies to “jqswfupload 1.1”

  1. Parabéns pelo plugin Alexandre, estava a tempos procurando um Uploader como este.

    A princípio, está bem completo, dei uma olhada rápida pelos Callbacks mas não vi nenhuma função para “onAllFileComplete”.

    Este recurso está incluso no plugin ou tem como implementá-lo?

  2. @Fábio: Obrigado e fico muito feliz de ver seu blog e você contribuindo e saber que dei inspiração para isto. Está ótimo o Blog. Quando usar o plugin jqswfupload você pode compartilhar no teu blog a experiência com ele.

    Estou trabalhando em próximas versões para ele, mas antes disto preciso ter testes que garantam seu funcionamento, principalmente por que ele usa uma biblioteca externa e para atualizar o swfupload é sempre um medo.

    Muito bom o plugin, e fico feliz que tenha ajudado indiretamente com isto!

  3. Olá Galera nao consegui resolver o problema do erro 404 ele funcionava legal de uma hora pra outra parou de funciona, mesmo se eu colocar um outro arquivo baixado continua o erro já fui em main.js e mudei a url para ../upload.php e volte nao adiantou o mesmo fiz para jquery.jqswfupload.js e nada me ajudem por favor, ficarei muito grato

    meu e-mail é marcelocajaiba@gmail.com abraços

  4. Resolvi o problema tirando o upload_uri do main.js

    uploadUrl: upload_uri + ‘upload.php’
    só que funciona mesmo é no ie6 nos outros da esse erro:

    Error #2044: IOErrorEvent: não manipulado. text=Error #2038: Erro do arquivo de E/S.

  5. Alexandre Obrigaod por responde amigo !
    Como faço para que esse codigo não dê erro 404 no Mozila ?

    como faço para alterar isso ? eu só vejo as opções de url no main.js e no jquery.jqswfupload.js

    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.

  6. Galera tem como explicar passo a passo como corrigir o erro 404 pois vou no main.js e altero o uploadUrl : ‘upload.php’
    ou vou em jquery.jqswfupload.js e altero a uploadUrl : ‘upload.php’ coloco ambos de com ../ ou vice-versa e nada. estou usando no localhost da minha maquina.

    Alexandre muito obrigado por me responder, mas se puder tirar minha duvida ficarei muito grato amigo !

  7. Galera nao sei o que acontece mas no meu computado dá erro nos seguintes navegadores Opera, Mozilla , chrome,

    agora se eu acessar de outra maquina o erro nao aparece no mozilla e , chrome. o que está acontecendo ?

    o erro é 404

  8. Galera tudo funciona perfeitamente, a cache estava armazendo os dados anteriores que contiam erro, foi só limpar e pronto. agora se eu quiser colocar um novo campo select como faço para passar o valor via get ou post para o arquivo upload, sendo pelo mentodo normal nao funciona ?

  9. o exemplo nao esta funcionando , eu tento carregar uma foto e so da o seguinte erro:

    File Error: DSC04236.jpg

    File Cancelled

    poderia testar se esta tudo ok ?

  10. @Carlos: O file cancelled acontece geralmente por que o arquivo ultrapassou o tamanho máximo nas configurações do plugin. Mas de qualquer forma, ele mostra uma mensagem no canto superior da tela.

  11. @Leandro: O diretório onde o upload será feito é feito no server. O plugin faz um post com os dados da imagem. Aconselho primeiro desenvolverem um upload simples, pois a dúvida não é está diretamente relacionada ao plugin. Abraços e boa sorte…

  12. Olá. Parabéns pelo script! Muito útil e simples de ser implantado!

    Porém estou com um probleminha que está me quebrando a cabeça. Está tudo OK e perfeito no Firefox, porém no IE7, ele dá um erro mostrando “totalSize is not defined”. O incrível é que a variável está SIM definida!

    $(“#upload-container”).jqswfupload({
    totalSize: ‘100 MB’,

    O que pode ser?

  13. olá, cara sou desenvolvedor web, e estava justamente procurando um plugin com estas características excelentes, porem a um único probleminha….
    sou deficiente visual e infelizmente acessibilidade dele é 0. será que a apocibilidade de de alguma forma tornalo acessível a leitores de tela?
    obrigado e parabéns por seu ótimo trabalho!

  14. Olá estou utilizando seu plugin juntamente com as apis do facebook, mas especificamente para upload de arquivos de video (.flv) , mas ao remeter aos servidores do facebook o seguinte erro é apresentado…

    Upload Started: reinaldo.flv – File Error: reinaldo.flv – Error #2049

    Obrigado!

  15. @bruno: os leitores de tela em questão suportam flash?? Caso contrário o plugin quando o flash não é suportado nem o javascript o upload múltiplo é trocado pelo upload padrão do browser, que desta vez não seria mais múltiplo.

  16. Exelente plugin! parabéns Alexandre!
    Vi q uma nova versão ja foi desenvolvida, mas por enquanto continuo a usar esta. Vi q muitos estao com problemas para passar variaveis via POST. No meu caso eu fiz uso da funcao addPostParam(name, value), http://demo.swfupload.org/Documentation/#addPostParam… Com ela é possível adicionar novos parametros via POST, é legal usa-la dentro da funçao upload_start do arquivo jquery.jqswfupload.js que é o momento onde sera chamada a funcao de upload do flash. Para usar esta funçao inicialmente eu crio uma variavel JS que pega o valor de um determinado campo do formulario e passo ela como o segundo parametro da funçao que é o value(valor), o primeiro é o nome q vc ira utilizar para esta variavel no arquivo de upload. Fica adica. Espero que seja util. abraço a todos!

    1. Olá João Vitor!
      Realmente estou quebrando a cabeça com esse plugin, deixei ele perfeito já para meu sistema de upload de multiplas imagens, mas estou a 2 dias quebrando a cabeça para passar uma variavel PHP por POST para eu poder usar dentro do arquivo upload.php, já tentei de tudo, vi GET, POST, COOKIE, SESSION, nenhum deles me deixou a variavel onde eu queria, agora estou tentando enviar no post_params, você falou como fazer, teria como mostrar um exemplo prático de como passar a variavel por POST ?

      desde já agradeço…

  17. @João: Obrigado João, esta é uma forma de passar parâmetros em tempo de execução, muito útil e que não quebra o funcionamento do plugin. As novas versões estão instáveis ainda e estou tentando já utilizar a api de upload do html 5 e o flash como fallback. Fico feliz que o plugin esteja sendo útil.

Deixe um comentário

O seu endereço de e-mail não será publicado.