jqswfupload 1.1
Thu 21 Jan 2010
-
Categorias
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
Bio
Meu nome é Alexandre Magno, sou analista de sistemas e trabalho atualmente na Globo.com, com especialidade na construção de interfaces Web para os diversos produtos das Organizações Globo. Tenho experiência em várias tecnologias Web, dentre elas HTML/CSS/Javascript, Wordpress e Ruby on Rails, além de ser um evangelista jQuery.
Comentários
A título de informação, funcionou normalmente no IE6.
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?
@Gabriel: Muito obrigado, fico feliz que esteja sendo útil. Esta funcionalidade estava com intenção de implementar para próxima versão. Abraços.
Muito Bom, Parabéns.
Num próximo sistema ele estará.
Alexandre, dá uma olhada neste plugin.
http://jqu3ry.wordpress.com/2010/03/19/conheca-o-jquery-navmenu-criando-um-menu-dropdown/
é o meu primeiro, e bem simples. venho sempre acompanhando e aprendendo com seu blog cara.
Um abraço.
@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!
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
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.
@Marcelo: A variável upload_uri foi declarado no head do documento para obter a url base do projeto pelo script do servidor. Em algumas situações ela é necessária. Abraços…
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.
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 !
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
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 ?
Estou tendo problemas nao consigo passar uma variavel do formulário para o upload
tipo:
quero que no upload receber o valor
exemplo
no main.js post_params : {
‘type’ : ‘swfupload’,
‘codigo’ : ‘codigo’
}
nao funciona
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 ?
@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.
Alguém poderia me ensinar onde configuro o caminho do diretório para onde irão as imagens?
@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…
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?
@Maykel: Muito obrigado e fico feliz que esteja fazendo um bom uso dele. Vou fazer alguns testes para tentar descobrir o que está acontecendo. Obrigado…
poderia dar um exemplo de como fazer para mover os arquivos do upload para um pasta
@Alex: este exemplo foge do escopo deste tutorial, depende da linguagem de servidor que será usada. A metodologia é a mesma de um upload comum. Espero ter ajudado e boa sorte.
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!
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!
@Reinaldo: Existe uma discussão no fórum do swfupload sobre este erro: http://swfupload.org/forum/generaldiscussion/193
Me parece que você está tentando fazer upload para outro domínio.
Espero que tenha ajudado, abraços.
@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.
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!
@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.