Boa noite pessoal!

Estou postando o código-fonte do projeto que estou desenvolvendo para envio múltiplo de arquivos usando Actionscript 3 e PHP como prometido no post anterior (recomendo ler, pois a base está mais bem explicada).

Neste post você vai ver como implementei o plugin jQuery ProgressBar 1.2 para apresentar o progresso do envio dos arquivos. Para iniciar, além do plugin você vai precisar (pra que não sabe :P ) do jQuery que é uma excelente biblioteca Javascript que eu uso o tempo todo pra facilitar na programação.

Bom, agora vamos aos códigos. Abaixo vou postar diferenças entre o código anterior:

function selectHandler(e:Event):void
{
	// Retorna os arquivos selecionados
	var arqs:FileReferenceList = FileReferenceList(e.target);
 
	// Seta a array com os arquivos selecionados
	selecionados = arqs.fileList;
 
	// Total de arquivos selecionados
	var total:Number = selecionados.length;
 
	// Objeto que será enviado para o Javascript com os arquivos selecionados
	var arquivos:Array = [];
 
	// Monta o objeto que será enviado
	for (var i:Number = 0; i < total; i++)
	{
		// FileReference do arquivo atual
		var arq:FileReference = FileReference(selecionados[i]);
 
		// Cria o objeto com as informações do arquivo para ser adicionado na Array
		var obj:Object = {
			id: i,
			nome: arq.name,
			tamanho: arq.size,
			tipo: arq.type
		};
 
		// Adiciona o objeto na Array
		arquivos.push(obj);
	}
 
	// Executa a função Javascript enviando o objeto
	ExternalInterface.call("adicionaArquivos", arquivos);
 
	// Envia o primeiro arquivo da array
	enviar(0);
}

Ao selecionar os arquivos, o Flash já os envia em uma array com informações (nome, tamanho, tipo) pela função “adicionaArquivos” no Javascript.

function enviar(i:Number):void
{
	// URL do script php para o upload
	var url:URLRequest = new URLRequest("http://localhost/upload.php");
 
	// Arquivo a ser enviado
	var arq:FileReference = FileReference(selecionados[i]);
 
	// Evento que dispara quando o Flash recebe um retorno do script php
	arq.addEventListener(DataEvent.UPLOAD_COMPLETE_DATA, completeHandler);
	// Evento que dispara quando ocorre um erro de entrada/saída
	arq.addEventListener(IOErrorEvent.IO_ERROR, ioErrorHandler);
	// Evento que dispara sempre que há uma mudança no progresso do envio
	arq.addEventListener(ProgressEvent.PROGRESS, progressHandler);
 
	try {
		// Envia o arquivo
		arq.upload(url);
	} catch (erro:Error) {
		log("Ocorreu um erro ao enviar o arquivo "+arq.name);
	}
}

A função “enviar” está adicionando o evento para capturar o progresso do envio. E na função “completeHandler” também adicionei o código necessário para remover o evento de progresso.

// Progresso do envio
function progressHandler(e:ProgressEvent):void
{
	// Seta a variavel com a referencia do arquivo enviado
	var arq:FileReference = FileReference(e.target);
 
	log("Progresso do arquivo " + arq.name + ": " + e.bytesLoaded + " / " + e.bytesTotal);
 
	// Envia a porcentagem para o Javascript
	ExternalInterface.call("progresso", atual, Math.round(e.bytesLoaded / e.bytesTotal * 100));
}

Adicionei a função “progressHandler” para notificar o progresso atual do arquivo por intermédio da função “progresso” criada via Javascript.

Obs.: Não esqueça de alterar a URL do seu script de upload.

O restante continua o mesmo código AS3. O código PHP também continua o mesmo. No final deste post você pode baixar o código-fonte completo com todos os arquivos utilizados.

Agora o código Javascript (comum.js) que utilizei para comunicação com o Flash:

// Recebe um objeto com os arquivos selecionados e suas informações
function adicionaArquivos(arquivos)
{
	// Número de arquivos selecionados
	var num = arquivos.length;
 
	// Faz o loop para mostrar todos os arquivos na página
	for (var i = 0; i < num; i++)
	{
		// Arquivo atual
		var arq = arquivos[i];
 
		// id do arquivo para manter referência com o Flash
		var id = arq.id;
 
		// Exibir no máximo 32 caractéres no nome do arquivo
		var nome = (arq.nome.length > 32) ? arq.nome.substring(0, 29) + "..." : arq.nome;
 
		// Adiciona uma div com o nome do arquivo na div "#arquivos" e cria a barra de progresso
		$('<div class="arquivo"><label>'+nome+':</label></div>').appendTo("#arquivos")
			.append($('<span id="upload_'+id+'" />').progressBar({ barImage: 'images/progressbg_green.gif' }));
	}
}
 
function progresso(id, valor)
{
	// Atualiza a porcentagem da barra de progresso
	$("#upload_"+id).progressBar(valor);
}
 
function uploadFinalizado()
{
	$("body").append('<div>Todos os arquivos foram enviados.</div>');
}

E o código HTML:

<html>
 
<head>
 
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<title>Upload</title>
 
	<script type="text/javascript" src="_js/jquery-1.3.2.min.js"></script>
	<script type="text/javascript" src="_js/jquery.progressbar.js"></script>
	<script type="text/javascript" src="_js/comum.js"></script>
 
	<style type="text/css">
		div, span { font-family: Arial; font-size: 11px; }
		.arquivo label { display:inline; width:180px; margin-right:10px; float:left; }
	</style>
</head>
 
<body>
 
	<object data="_swf/upload.swf" name="uploader" id="uploader" type="application/x-shockwave-flash" height="32" width="80">
		<param value="false" name="menu">
		<param value="always" name="allowScriptAccess">
	</object>
 
	<div id="arquivos"></div>
 
</body>
 
</html>

Espero que o código esteja bem explicado e que seja útil. Por favor, postem comentários, dúvidas, sugestões, etc…
Todos os arquivos utilizados:

http://fredimachado.com.br/wp-content/plugins/downloads-manager/img/icons/winrar.gif download: upload_progresso.rar (34.78KB)
added: 05/05/2009
clicks: 2930
description: Código-fonte