Webpoint

 
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