multiUpload

Desenvolvido por Fredi Machado <fredisoft at gmail dot com>
http://fredimachado.com.br

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. O multiUpload usa o poder do ActionScript 3 e do Flash Player 9 para permitir a seleção múltipla dos arquivos, Javascript para fácil integração com seu site e qualquer linguagem para processar os uploads no servidor. Este projeto foi inspirado pelo método que o Orkut utiliza para o envio de fotos.

Exemplos

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>

Exemplos