Fredi Machado

Bom dia pessoal!

Adicionei um novo exemplo de uso do multiUpload, o Álbum de Fotos.

A idéa básica é: Você tem um form que será enviado via Ajax para o script que
salva o álbum e retorna o id inserido. Após isto, uma nova instância do multiUpload
é criada para possibilitar a seleção das imagens e enviá-las para o script de upload
junto com o id do álbum cadastrado.

download: multiUpload-0.4-20120107.zip (106.08KB) added: 07/01/2012 clicks: 8742 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

Abraço!

Boa tarde pessoal!

Não estou muito satisfeito com a velocidade do meu servidor gringo de hospedagem e já estou me preparando para trocar por um brasileiro neste próximo domingo 23/08.

Abraço!

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: 8742 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!

Boa noite pessoal!

Iniciei um novo projeto, chamado multiUpload e acabei de colocá-lo no Github.
Este projeto é básicamente uma tentativa de tornar meu Upload múltiplo de arquivos muito mais fácil de implementar e com várias opções que podem ser modificadas e extendidas conforme a necessidade de cada um. Iniciei o desenvolvimento todo em inglês para tornar o código o mais universal possível, mas prometo fazer uma documentação também em português para facilitar a vida de todos, hehe.

Quero adicionar novos exemplos e fazer a documentação o mais breve possível, então quem se interessar fique atento.

O projeto está hospedado no Github: http://github.com/fredi/multiUpload/tree/master

Por enquanto fiz somente uma “classe” em javascript bem básica para que possa ser implementada fácilmente sobre qualquer biblioteca, mas como sou fielmente adepto ao jQuery, vou fazer um plugin em breve para facilitar ainda mais a vida de quem usa esta biblioteca.

Para testar o exemplo basta extrair todos os arquivos em alguma pasta do seu servidor e abrir a pasta examples (ex.: http://localhost/upload/examples). Não é necessário alterar o caminho para o endereço do script de upload, pois agora não precisa mais colocar a url completa.

Em breve vou postar mais informações sobre o projeto.

Abraço!

Bom dia pessoal!

O código do meu último post não estava funcionando corretamente no Internet Explorer, mas consegui resolver o problema e já testei nos IEs 6, 7 e 8. Testado e aprovado também no FF 3 e Chrome.

O problema era no código que inseria o flash na página, os IEs não conseguiam se comunicar com o objeto. Tentei usar o código padrão e ai parou de funcionar no Firefox, então fiz um “if” básico.

Troque:

<embed type="application/x-shockwave-flash" src="_swf/upload.swf" id="uploader" name="uploader" bgcolor="#ffffff" quality="high" allowscriptaccess="always" width="137" height="27" />

Por:

<script type="text/javascript">
	// Para M$ IE
	if (document.all)
	{
		document.write('<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="137" height="27" id="uploader" align="middle">');
		document.write('<param name="allowScriptAccess" value="sameDomain" />');
		document.write('<param name="allowFullScreen" value="false" />');
		document.write('<param name="menu" value="false" />');
		document.write('<param name="movie" value="_swf/upload.swf" />');
		document.write('<param name="quality" value="high" />');
		document.write('<param name="bgcolor" value="#ffffff" />');
		document.write('<embed src="_swf/upload.swf" quality="high" bgcolor="#ffffff" width="137" height="27" name="uploader" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" menu="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />');
		document.write('</object>');
	}
	else // Outros navegadores
		document.write('<embed type="application/x-shockwave-flash" src="_swf/upload.swf" id="uploader" name="uploader" bgcolor="#ffffff" quality="high" allowscriptaccess="always" menu="false" width="137" height="27" />');
</script>

Código completo atualizado:

download: uploader.zip (22.73KB) added: 09/06/2009 clicks: 3408 description: Upload múltiplo de arquivos com a classe Uploader

Abraço!