Bom dia pessoal!
Acabei de postar uma atualização do meu projeto chamado multiUpload (post inicial sobre o projeto).

Instruções de uso:
Primeiro você deve adicionar o SWFObject e a classe base do multiUpload na tag head da sua página:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script> <script type="text/javascript" src="js/multiUpload.js"></script>
O próximo passo é criar duas DIVs com ids diferentes, uma que se transformará no botão de seleção dos arquivos e a outra para exibir a lista dos arquivos selecionados e suas informações.
<div id="uploader"></div> <div id="uploader_files"></div>
Agora você deve criar uma nova instância da classe multiUpload, enviando como parâmetros o id da div que será o botão, o id da div que exibirá a lista dos arquivos e informações e um objeto com opções de configuração respectivamente.
<script type="text/javascript"> var uploader = new multiUpload('uploader', 'uploader_files', { swf: 'swf/multiUpload.swf', // script: 'upload.php', expressInstall: 'swf/expressInstall.swf', multi: true }); </script>
Finalmente, adicione as ações:
<a href="javascript:uploader.startUpload();">Start Upload</a> | <a href="javascript:uploader.clearUploadQueue();">Clear Upload Queue</a>
Para ficar mais bonito utilize a folha de estilos padrão do multiUpload:
<style type="text/css"> @import "css/multiUpload.css"; </style>
DEMO
Upload múltiplo de arquivos – Exemplo mais básico para criação de um upload múltiplo
Upload múltiplo com auto iniciação – Este exemplo iniciará o envio dos arquivos automaticamente após a seleção.
Seleção de um único arquivo – Permite somente um arquivo selecionado
Envio de dados + upload de único arquivo – Este exemplo possibilita enviar uma variável em modo POST junto com o upload para salvar o arquivo.
Envio de dados + upload múltiplo – Este exemplo permite que você digite um prefixo para o nome dos arquivos que serão salvos.
Tipos de arquivos permitidos – Possibilita a seleção de arquivos com extensões pré-definidas.
Limite de tamanho dos arquivos – Limita o tamanho máximo que um arquivo pode ter
Download da versão 0.3 com todos os exemplos:
|
|
download: multiUpload-0.4-20120107.zip (106.08KB) added: 07/01/2012 clicks: 7781 description: Versão 0.4 do projeto multiUpload - Atualizado: 07/01/2012 Adicionada opção de limitar o número de arquivos a serem enviados |
Estou utilizando o Github para hospedar o projeto, então quem quiser pode conferir aqui: http://github.com/fredi/multiUpload/tree/master
Em breve vou criar um plugin jQuery e mais exemplos, então fique ligado!
Abraço!

Perfeito cara.. parabéns..
Vou ficar ligado com suas atualizações..
Abraço
RGDS
Anderson Murakami
17/08/2009 @ 7:28 pm
Iaew Fred… cara… muito bacana esse novo modelo do sistema… tu conseguiu evoluir bastante heim…
mas eh o seguinte: do jeito que eh feito o upload das imagens… ele sempre chama um arquivo .php [que eh responsável por tratar os dados enviados] toda vez que envia uma imagem…
No meu caso, eu tenho que enviar dados para um banco de dados junto com a galeria de imagens… MAS do jeito que está ele envia os mesmos dados todas as vezes que envia uma imagem… daí da bronca no meu sistema…
* Tem como separar os script pra onde serão enviados os dados?? Tipo, enviar o que for de upload para este script atual, e os dados que não dizem respeito a essas imagens para outro… para que possam ser tratados uma única vez????
Mas tá show de bola o sisteminha aew…
[]‘s
18/08/2009 @ 10:07 pm
Pra você ter uma idéia melhor: Eh um sistema de notícias que eu quero fazer.. soh que ele tem a opção de enviar uma galeria de imagens ou não junto com a notícia. E fora a notícia em si… tem alguns outros dados que eu preciso enviar para o banco…
18/08/2009 @ 10:11 pm
Daee Gabriel!!
Ta, eu saquei a idéia. Vou fazer o seguinte plugin:
Você faz um form normal com os campos para cadastrar uma notícia, ou álbum de fotos. Então vai ser só utilizar o plugin jQuery para transformar este form e possibilitar que os campos sejam enviados via Ajax para o script que foi setado no atributo “action” do form. Este script vai retornar dados para o plugin, como id da notícia que foi cadastrada no banco e então o plugin começa automaticamente o envio dos arquivos para o script de upload enviando também o id retornado. Isso tudo sem dar refresh na página, o usuário só vai precisar preencher os campos do form e selecionar os arquivos.
Era isso né? heheh
Já vou iniciar o desenvolvimento deste plugin.
Abraço!
19/08/2009 @ 9:49 am
Eh isso mermo Fred… Tinha que ter uma opção de enviar dados de um formulário normal (inputs, selects, etc…) JUNTO com o upload das imagens…
Ficaria bem bacana..
Quanto mais necessidades do dia-a-dia ele atender… mas invocado fica o script…
Obrigado pelo auxílio Fredi…
Fico no aguardo de novidades…
[]‘s
20/08/2009 @ 5:51 pm
Daee rapaz!!
Da uma olhada no exemplo novo que eu fiz. Segue bem os passos que te falei. Baixa ae pra testar.
http://fredimachado.com.br/2009/08/24/multiupload-novo-exemplo-album-de-fotos/
Abraço!
25/08/2009 @ 1:11 pm
Beleza Fred… vou dar uma olhadinha lah…
26/08/2009 @ 11:39 am
Fredi, parabens pelo tutorial, estava buscando uma ferramenta assim.
Encontrei também uma ferramenta como a sua, muito prática usando Flash e jQuery.
http://www.uploadify.com/
Valeu
04/09/2009 @ 7:35 pm
Kara seu script é demais… meus parabens, isso vai facilitar muito minha vida…
mas vem ca estou pretendendo usar ele para criar uma galeria de imagens, poderia dar um exemplo de como utilizar um tratamento de imagem na hora de enviar…
tem um script de tratamento bem legal http://code.google.com/p/m2brimagem/downloads/list se pudesse me dar uma ajuda eu agradeceria muito…
13/09/2009 @ 7:42 pm
Oi Rafael!
Estou preparando um exemplo mais completo com tratamento de imagem utilizando a classe wideImage, conhece? http://wideimage.sourceforge.net/
Você já conferiu o exemplo de álbum de fotos? http://fredimachado.com.br/2009/08/24/multiupload-novo-exemplo-album-de-fotos
Abraço!
14/09/2009 @ 11:04 pm
Fredi vc está de parabéns com esse tutorial muito bacana mesmo, eu queria tirar uma duvida desculpe a minha ignorância mais tem como pegar dados como se fosse um formulario que dizer além das imagens você pegar “nome” “email”, “comentário”. pelo method $_POST[];
Ok mais muito obrigado desde já valeuuu.
06/11/2009 @ 11:15 am
Dae RONALDO!
Dá uma olhada nesse exemplo aqui ó:
http://fredimachado.com.br/2009/08/24/multiupload-novo-exemplo-album-de-fotos/
É um álbum de fotos.
Abraço!
13/11/2009 @ 5:10 pm
Muito bomm mesmo esses scripts!
eu juntei as dicas em uma só, porém eu gostaria de poder limitar a quantidade de arquivos enviados. tentei colocar a linha maxfile no js e no index, mas nao deu certo. nem sei se existe isso. rrss
Se tiver alguma maneira de fazer isso agradeço.
ou entao adptar a um form q ja tenho para multiplos arquivos com input e submit. dai selecionar apenas os 6 e quando enviar pelo submit são tratados todos juntos em outra pagina.
Desde ja agradeço
10/12/2009 @ 2:34 pm
Fredi,
ai vai uma poergunta que acho que ai ser simples .. como faço pra hora que o upload for copletado em vez da barra fikar em 100%, aparecer no lugar dela enviado ou arquivo enviado ?
abraços!
23/01/2010 @ 5:15 pm
Boa noite, esta dando erro o envio de arquivos multiplos quando utilizo o Internet Explorer, você sabe como resolver esse bug?
abraço,
27/01/2010 @ 10:37 pm
Oi
Se eu usar o multiupload com um input do tipo hidden, como faço para que o valor do input venha de um post de outro formulário submetido por jquery?
Já tentei inúmeros métodos para pegar o post de um form por jquery mas não consegui…
Podem me ajudar?
Agradeço desde já!
Obrigado
22/02/2010 @ 1:10 am
E ai Fredi blz! Muito legal o script.
Mais é o seguinte, quando posto arquivos de tamanho pequeno, nao aparece a barra de progresso, porem o arquivo é enviado normalmente.
Nao consegui descobrir o que é!
Abraços!
26/03/2010 @ 5:59 pm
Caro Fredi,
Show de bola suas vídeos aulas.
Estou fazendo um site e acredito que posso de alguma forma usar suas vídeos aulas para implementar o que está no centro do site quando se clica em um dos serviços no menu: http://chlins.com/eventos/index.html
Acredito que esta seja o principal complicador, pois preciso que seja prático a inserção dos anunciantes, e com facilidade para os que procuram como: no botão entre em contato, abre um formulário com pedido de orçamento, sugestão, critica e isso vai direto para o endereço do profissional. No botão como chegar: o mapa.
Detalhe: estou fazendo este tema para usá-lo no wordpress.
Não programo nada, você me aconselha alguma vídeo aula específica para fazer este sistema?
27/03/2010 @ 8:28 pm
Opa..tudo bem!! primeiramente parabens pelo ótimo trabalho, estou tentando usar seu sistema de upload em conjunto com um servidor de ftp que tenho (Pureftpd) com autenticação em Mysql, coloquei no endereço da pasta um variavel de seção, até ai tudo normal funciona direitinho, vc loga com um usuario e ele grava os arquivos na pasta do mesmo, mas só no IE, Firefox, Safari, Chome nao funciona ele simplismente ignora a variavel e grava os arquivos na pasta onde fica o script php (upload.php)….se vc puder ajudar….andei pesquisando a respeito e achei isso aqui http://www.actionscript.org/forums/showthread.php3?t=103676
Obrigado
02/06/2010 @ 4:25 pm
cara eu estou fazendo um script php semelhante mais com a class.upload com redimensionamento cadastro no BD, só que é seleção arquivo por arquivo um por um correndo o risco de enviar foto repetida em vários campos file eu não conseguindo fazer da maneira do seu juntando com meus script php.
você pode mim ajudar.
aguardo resposta.
01/07/2010 @ 2:12 pm
Olá.
Muito bom este script, foi a solução em uma adaptação que fiz em um módulo de cms.
Gostaria de saber se tem como mudar o nome BROSWE FILES para ADICIONAR IMAGENS.
Já tentei com o Sothink SWF Quicker, altero o texto e exporto para swf, mas não funciona.
Grato!
16/07/2010 @ 1:39 am
Olá!
Os scripts são shows de bola…
Queria perguntar uma coisa:
O botão “browse files”! Eu queria personalizar ele, de acordo com as cores do clientes…eu vi que é um arquivo em flash, que tem comandos, tem como eu fazer algo pra modificar a aparência deste arquivo?
22/11/2010 @ 4:05 pm
Prezado Fredi,
uma pequena duvida:
estou tento problemas com variáveis que estão na sessão quando utilizo o multiupload ela simplismente disaparece.E o seguinte, quando trato no arquivo upload.php tambem faço um insert no banco com o caminho da imagem e seq_usuario e sig_usuario que vem da sessão.Mas na hora da requisição ele simplismente some se dou um print o valor ta la.Vc sabe se alguma restrição?
Outra coisa como vc esta´passando via post a variavel FILE? Pois como ultima solução passaria o valor dessas variaveis por ali.
Aguardo retono
Obrigado
Diego Ramos da Silva
Analista de Sistema
31/03/2011 @ 9:29 am
Não sei se você ainda está dando suporte para essa versão, mas estranhamente ela não está funcionando em servidores com SSL.
Já tentei algumas coisa e até o momento nada. Será que vc pode me dar alguma dica?
Atenciosamente,
Walison
04/04/2011 @ 6:39 pm
Ola fredi!
Caraca muita boa ferramenta de uploads multiplos, esta sendo muito útil pra mim, gostaria de saber se tem como obter a taxa de transferencia e tempo estimado, seria muito interessente, estou procurando por algo parecido mas se poder me ajudar agradeço.
Desde ja obrigado.
09/07/2011 @ 12:26 pm