jqswfupload 1.1
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 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)
//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
Deixe uma resposta