Fredi Machado

<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>

<div id="uploader"></div>
<div id="uploader_files"></div>

<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>

<a href="javascript:uploader.startUpload();">Start Upload</a> | <a href="javascript:uploader.clearUploadQueue();">Clear Upload Queue</a>

<style type="text/css">
	@import "css/multiUpload.css";
</style>

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

<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>

<script type="text/javascript">
	// Script de upload
	var url = "http://localhost/upload/upload.php";
</script>
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.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">
	#arquivos { display:none; }
	.c30p { width:30%; float:left; }
	.c100 { width:100px; float:left; }
	.bold { font-weight:700; }
	.ac { text-align:center; }
	.sep { background-color:#EEE; height:1px; line-height:1px; clear:both; margin:1px; }
	#totais_arquivos { display:none; }
</style>

<div>
	<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>
</div>
 
<div id="arquivos">
	<div>
		<div class="c30p bold">Foto</div>
		<div class="c100 ac bold">Tamanho</div>
		<div class="c100 ac bold">Remover</div>
		<div class="c30p bold">Andamento</div>
	</div>
	<div id="lista_arquivos"></div>
	<div id="totais_arquivos">
		<span class="bold">
			Total de fotos: <span id="total_arquivos"></span>.
			Tamanho total: <span id="total_tamanho"></span>.
		</span>
		<br />
		<input type="button" id="btUpload" value="ENVIAR" style="padding:5px;font-size:12px;" />
	</div>
</div>

var uploader = null; // Objeto do SWF
var arquivos = {}; // Objeto com as informações dos arquivos (id, nome, tamanho, etc...)
var fila = []; // Array com os ids dos arquivos na fila
var atual    = 0; // Arquivo enviado no momento
var enviando = false; // Para evitar envio "duplo"
 
/**
 * Função que o Flash vai executar por padrão quando estiver tudo carregado
 * Assim podemos adicionar os listeners para nos retornar as informações
 */
function uploaderPronto()
{
	// Objeto do SWF no html
	uploader = document.getElementById('uploader');
 
	// Adiciona as funções
	// O primeiro argumento é o evento no Flash, o segundo argumento é a função
	// que o Flash irá executar aqui no Javascript quando o evento for disparado
	uploader.addListener('onSelected', 'onSelect');
	uploader.addListener('onProgress', 'onProgress');
	uploader.addListener('onComplete', 'onComplete');
	uploader.addListener('onCompleteData', 'onCompleteData');
 
	// Seta a url do script de upload
	uploader.url(url);
 
	// Seta os tipos de arquivos permitidos na caixa de seleção
	// Neste caso queremos somente imagens
	uploader.setaTiposPermitidos([
		{desc: "Imagens JPG, GIF ou PNG", ext: "*.jpg;*.jpeg;*.gif;*.png"}
	]);
}
 
// Escuta o evento "onSelected" do Flash
function onSelect(e)
{
	// Retorna uma array de objetos com informações do(s) arquivo(s) selecionado(s)
	var arqs = e.arquivos;
 
	// Faz um loop para adicionar os arquivos e criar as divs e barra de progresso
	for (var i = 0; i < arqs.length; i++)
		adicionaArquivo(arqs[i]);
 
	// Como setei no css a div #arquivos como "display:none"
	// agora quero que ela seja exibida
	$("#arquivos").show();
 
	// Executa a função para calcular totais (arquivos selecionados e tamanho total do upload)
	calculaTotais();
 
	// Seta o evento "click" do botão Enviar
	$("#btUpload").click(function() {
		enviarArquivos();
	});
}
 
// Adiciona o objeto com as informações do arquivo
function adicionaArquivo(arq)
{
	// Seta o objeto
	arquivos[arq.id] = arq;
 
	// Adiciona o html necessário para exibição das informações do arquivo e barra de progresso
	$('<div class="arquivo" id="arquivo_'+arq.id+'"><div class="c30p">'+arq.nome+'</div><div class="c100 ac">'+tamanho(arq.tamanho)+'</div><div class="c100 ac"><a href="javascript:void(0);" class="remover" rel="'+arq.id+'">X</a></div><div class="c30p progresso">&nbsp;</div><div class="sep" /></div>').appendTo("#lista_arquivos")
		.find(".progresso").append($('<span id="upload_'+arq.id+'" />').progressBar({ barImage: 'images/progressbg_green.gif' }));
 
	// Adiciona o evento "remover" ao clicar no link "X"
	$("#arquivo_"+arq.id+" .remover").click(function() {
		// Só continua caso o upload não esteja ativo
		if (!enviando)
		{
			// Pega o id, a partir do attributo "rel" do link
			var id = $(this).attr("rel");
			// Da um fadeOut e remove a div com as informações do arquivo
			$("#arquivo_"+id).fadeOut('fast', function() { $(this).remove(); });
			// Executa a função "removeArquivo" do Flash
			uploader.removeArquivo(id);
			// Remove as informações do arquivo do objeto
			delete arquivos[String(id)];
			// Re-calcula os totais
			calculaTotais();
		}
	});
}
 
// Função que é executada ao clicar no botão "Enviar"
function enviarArquivos()
{
	// Só continua caso o upload não esteja ativo
	if (!enviando)
	{
		// Começamos do primeiro arquivo da fila
		atual    = 0;
		// Agora estamos enviando
		enviando = true;
 
		// Monta a array fila com os ids dos arquivos
		for (var a in arquivos)
			fila.push(arquivos[a].id);
 
		// Executa a função "iniciaUpload" do flash já enviando o id do primeiro arquivo na fila
		uploader.iniciaUpload(fila[atual]);
	}
}
 
// Escuta o evento "onProgress" do Flash
function onProgress(e)
{
	// Calcula a porcentagem de acordo com as informações recebidas
	var valor = Math.ceil(Number(e.bytesLoaded / e.bytesTotal * 100));
	// Atualiza a barra de progresso
	$("#upload_"+e.id).progressBar(valor);
}
 
// Escuta o evento "onComplete" do Flash
function onComplete(e)
{
	// Vamos para o próximo arquivo
	atual++;
 
	// Se ainda não chegou ao final da fila, envia próximo arquivo
	if (atual < fila.length)
		uploader.iniciaUpload(fila[atual]);
	// Chegou ao final da fila, então aguarda 2 segundos e recarrega a página
	else
		window.setTimeout(function() {
			window.location.reload(true);
		}, 2000);
}
 
// Escuta o evento "onCompleteData" do Flash
function onCompleteData(e)
{
	// Caso o script retorne "1" é porque tudo ocorreu bem
	if (e.dados == "1")
		$("#upload_"+e.id).html("Enviado.");
	// Caso contrário é porque ocorreu algum erro
	else
		$("#upload_"+e.id).html("Erro ao enviar.");
 
}
 
// Calcula os totais (número de arquivos na fila e tamanho total dos arquivos)
function calculaTotais()
{
	var c = 0; // Quantidade de arquivos
	var t = 0; // Tamanho
 
	for (var i in arquivos)
	{
		c++;
		t += arquivos[i].tamanho; // Vai somando os tamanhos
	}
 
	// Temos pelo menos 1 arquivo na fila
	if (c)
	{
		$("#total_arquivos").text(c); // Número de arquivos
		$("#total_tamanho").text(tamanho(t)); // Tamanho total, já convertido para MB ou KB usando a função "tamanho"
		$("#totais_arquivos").show(); // Exibe a div
	}
	// Não temos arquivos
	else
	{
		// Esconde as divs
		$("#totais_arquivos").hide();
		$("#arquivos").hide();
	}
}
 
// Retorna o tamanho em MB ou KB
function tamanho(val)
{
	var kb = Number(Number(val)/1024).toFixed(1);
	return kb >= 1000 ? Number(kb/1024).toFixed(1) + " MB" : kb + " KB";
}

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);
}

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);
	}
}

// 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));
}

// 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>');
}

<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>