[Alexandre Magno] jqswfupload 1.1

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

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:

 <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