Erro com Upload Múltiplos Arquivos (Fancy Upload)

Diego Macêdo · Agosto 29, 2009

Amigos,

estou utilizando o script Fancy Upload (Queued Photo Uploader). Eu limpei o código o arquivo "script.php" e fiz o teste e funcionou perfeitamente. Ao fazer o upload das fotos, ele informa que as fotos foram enviadas sem erro.

Se eu adicionar o meu código, que não interfere e nem utiliza nada do código dele em si, ele dá mensagem de erro, mas funciona assim mesmo. Só simplesmente mostra como se tivesse dando erro, mas não interfere em nada no funcionamento.

Alguém saberia dizer o que poderia ser?

Abaixo os códigos:

[build.html] - Arquivo que exibe o script para o envio

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Enviar Fotos</title>

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.2/mootools.js"></script>

	<script type="text/javascript" src="source/Swiff.Uploader.js"></script>

	<script type="text/javascript" src="source/Fx.ProgressBar.js"></script>

	<script type="text/javascript" src="http://github.com/mootools/mootools-more/raw/master/Source/Core/Lang.js"></script>

	<script type="text/javascript" src="source/FancyUpload2.js"></script>


	<!-- See script.js -->
	<script type="text/javascript">
		//<![CDATA[

		/**
 * FancyUpload Showcase
 *
 * @license		MIT License
 * @author		Harald Kirschner <mail [at] digitarald [dot] de>
 * @copyright	Authors
 */

window.addEvent('domready', function() { // wait for the content

	// our uploader instance 
	
	var up = new FancyUpload2($('demo-status'), $('demo-list'), { // options object
		// we console.log infos, remove that in production!!
		verbose: true,
		
		// url is read from the form, so you just have to change one place
		url: $('form-demo').action,
		
		// path to the SWF file
		path: 'source/Swiff.Uploader.swf',
		
		// remove that line to select all files, or edit it, add more items
		typeFilter: {
			'Images (*.jpg, *.jpeg, *.gif, *.png)': '*.jpg; *.jpeg; *.gif; *.png'
		},
		
		// this is our browse button, *target* is overlayed with the Flash movie
		target: 'demo-browse',
		
		// graceful degradation, onLoad is only called if all went well with Flash
		onLoad: function() {
			$('demo-status').removeClass('hide'); // we show the actual UI
			$('demo-fallback').destroy(); // ... and hide the plain form
			
			// We relay the interactions with the overlayed flash to the link
			this.target.addEvents({
				click: function() {
					return false;
				},
				mouseenter: function() {
					this.addClass('hover');
				},
				mouseleave: function() {
					this.removeClass('hover');
					this.blur();
				},
				mousedown: function() {
					this.focus();
				}
			});

			// Interactions for the 2 other buttons
			
			$('demo-clear').addEvent('click', function() {
				up.remove(); // remove all files
				return false;
			});

			$('demo-upload').addEvent('click', function() {
				up.start(); // start upload
				return false;
			});
		},
		
		// Edit the following lines, it is your custom event handling
		
		/**
		 * Is called when files were not added, "files" is an array of invalid File classes.
		 * 
		 * This example creates a list of error elements directly in the file list, which
		 * hide on click.
		 */ 
		onSelectFail: function(files) {
			files.each(function(file) {
				new Element('li', {
					'class': 'validation-error',
					html: file.validationErrorMessage || file.validationError,
					title: MooTools.lang.get('FancyUpload', 'removeTitle'),
					events: {
						click: function() {
							this.destroy();
						}
					}
				}).inject(this.list, 'top');
			}, this);
		},
		
		/**
		 * This one was directly in FancyUpload2 before, the event makes it
		 * easier for you, to add your own response handling (you probably want
		 * to send something else than JSON or different items).
		 */
		onFileSuccess: function(file, response) {
			var json = new Hash(JSON.decode(response, true) || {});
			
			if (json.get('status') == '1') {
				file.element.addClass('file-success');
				file.info.set('html', '<strong>Image was uploaded:</strong> ' + json.get('width') + ' x ' + json.get('height') + 'px, <em>' + json.get('mime') + '</em>)');
			} else {
				file.element.addClass('file-failed');
				file.info.set('html', '<strong>An error occured:</strong> ' + (json.get('error') ? (json.get('error') + ' #' + json.get('code')) : response));
			}
		},
		
		/**
		 * onFail is called when the Flash movie got bashed by some browser plugin
		 * like Adblock or Flashblock.
		 */
		onFail: function(error) {
			switch (error) {
				case 'hidden': // works after enabling the movie and clicking refresh
					alert('To enable the embedded uploader, unblock it in your browser and refresh (see Adblock).');
					break;
				case 'blocked': // This no *full* fail, it works after the user clicks the button
					alert('To enable the embedded uploader, enable the blocked Flash movie (see Flashblock).');
					break;
				case 'empty': // Oh oh, wrong path
					alert('A required file was not found, please be patient and we fix this.');
					break;
				case 'flash': // no flash 9+ :(
					alert('To enable the embedded uploader, install the latest Adobe Flash plugin.')
			}
		}
		
	});
	
});
		//]]>
	</script>



	<!-- See style.css -->
	<style type="text/css">
		/**
 * FancyUpload Showcase
 *
 * @license		MIT License
 * @author		Harald Kirschner <mail [at] digitarald [dot] de>
 * @copyright	Authors
 */

/* CSS vs. Adblock tabs */
.swiff-uploader-box a {
	display: none !important;
}

/* .hover simulates the flash interactions */
a:hover, a.hover {
	color: red;
}

#demo-status {
	padding: 10px 15px;
	width: 420px;
	border: 1px solid #eee;
}

#demo-status .progress {
	background: url(assets/progress-bar/progress.gif) no-repeat;
	background-position: +50% 0;
	margin-right: 0.5em;
	vertical-align: middle;
}

#demo-status .progress-text {
	font-size: 0.9em;
	font-weight: bold;
}

#demo-list {
	list-style: none;
	width: 450px;
	margin: 0;
}

#demo-list li.validation-error {
	padding-left: 44px;
	display: block;
	clear: left;
	line-height: 40px;
	color: #8a1f11;
	cursor: pointer;
	border-bottom: 1px solid #fbc2c4;
	background: #fbe3e4 url(assets/failed.png) no-repeat 4px 4px;
}

#demo-list li.file {
	border-bottom: 1px solid #eee;
	background: url(assets/file.png) no-repeat 4px 4px;
	overflow: auto;
}
#demo-list li.file.file-uploading {
	background-image: url(assets/uploading.png);
	background-color: #D9DDE9;
}
#demo-list li.file.file-success {
	background-image: url(assets/success.png);
}
#demo-list li.file.file-failed {
	background-image: url(assets/failed.png);
}

#demo-list li.file .file-name {
	font-size: 1.2em;
	margin-left: 44px;
	display: block;
	clear: left;
	line-height: 40px;
	height: 40px;
	font-weight: bold;
}
#demo-list li.file .file-size {
	font-size: 0.9em;
	line-height: 18px;
	float: right;
	margin-top: 2px;
	margin-right: 6px;
}
#demo-list li.file .file-info {
	display: block;
	margin-left: 44px;
	font-size: 0.9em;
	line-height: 20px;
	clear
}
#demo-list li.file .file-remove {
	clear: right;
	float: right;
	line-height: 18px;
	margin-right: 6px;
}	</style>


</head>
<body>

	<div class="container">
		<h2>Enviar Fotos</h2>



		<!-- See index.html -->
		<div>
			<form action="processar2.php" method="post" enctype="multipart/form-data" id="form-demo">

	<fieldset id="demo-fallback">
		<legend>File Upload</legend>
		<p>

			This form is just an example fallback for the unobtrusive behaviour of FancyUpload.
			If this part is not changed, something must be wrong with your code.
		</p>
		<label for="demo-photoupload">
			Upload a Photo:
			<input type="file" name="Filedata" />
		</label>
	</fieldset>

	<div id="demo-status" class="hide">
		<p>

			<a href="#" id="demo-browse">Adicionar Fotos</a> |
			<a href="#" id="demo-clear">Limpar Lista</a> |
			<a href="#" id="demo-upload">Começar o Envio!</a>
		</p>
		<div>
			<strong class="overall-title"></strong><br />
			<img src="../../assets/progress-bar/bar.gif" class="progress overall-progress" />

		</div>
		<div>
			<strong class="current-title"></strong><br />
			<img src="../../assets/progress-bar/bar.gif" class="progress current-progress" />
		</div>
		<div class="current-text"></div>
	</div>

	<ul id="demo-list"></ul>

</form>		</div>


	</div>
</body>
</html>

[script.php] LIMPO (Arquivo funcionando e exibindo a mensagem que o arquivo foi enviado normalmente)

<?php
set_time_limit(0); // Deixa o tempo de execução do script ilimitado
include('class.imghandler.php'); // Classe de Manipulação das fotos
include('../conexao2.php'); // Conecta ao BD

/*/ Pega os dados do evento pelo ID no BD
$id = $_POST['id'];
$query_rs_galeria = "SELECT * FROM galeria WHERE id = ".$id.";";
$rs_galeria 	= mysql_query($query_rs_galeria) or die("Erro ao efetuar a consulta no BD: ".mysql_error());
$row_rs_galeria = mysql_fetch_assoc($rs_galeria);

$data_inversa = $row_rs_galeria['data_inversa']; // Pasta do evento pela data invertida
$local = $row_rs_galeria['local']; // Nome da pasta do local
*/

// Dados da Imagem
$arqName 	= $_FILES['Filedata']['name']; // Nome do arquivo original
$arqTemp 	= $_FILES['Filedata']['tmp_name']; // Nome do arquivo temporário
$arqError 	= $_FILES['Filedata']['error']; // Informações de erro
$arqType 	= $_FILES['Filedata']['type']; // Tipo de Arquivo
$arqSize 	= $_FILES['Filedata']['size']; // Tamanho do Arquivo
$img = $arqTemp;

// Informações das pastas
$pasta = './temp/'; // Pasta temporária
$pasta_originais = "./originais/maikai_show_bar/20090826/"; // Pasta das fotos originais
$pasta_evento = "./eventos/maikai_show_bar/20090826/"; // Pasta das fotos com marca d'agua
$pasta_thumbs = "./eventos/maikai_show_bar/20090826/thumbs/"; // Pasta das miniaturas

// Validação
$error = false;

if (!isset($_FILES['Filedata']) || !is_uploaded_file($arqTemp)) {
	$error = 'Envio Inválido!';
}

// Verifica se a foto é menor que 8 MB
if (!$error && $arqSize > 8 * 1024 * 1024){
	$error = 'Por favor, envie somente fotos menores que 8 MB!';
}

// Verifica se é uma imagem
if (!$error && !($size = @getimagesize($arqTemp))){
	$error = 'Por favor, envie somente fotos, pois nenhum outor tipo de arquivo é permitido!';
}

// Verifica o tipo de arquivo da imagem
if (!$error && !in_array($size[2], array(1, 2, 3, 7, 8))){
	$error = 'Por favor, envie somente imagens do tipo: JPEG, GIF ou PNG.'; 
}

// Verifica o tamanho mínimo das dimensões das fotos
if (!$error && ($size[0] < 400) || ($size[1] < 400)){
	$error = 'Por favor, envie uma foto maior que 400 px';
}

if ($error) {
	$return = array(
		'status' => '0',
		'error' => $error
	);

} else {
	$return = array(
		'status' => '1',
		'name' => $arqName
	);

	// Pegamos o valor do HASH do arquivo
	$return['hash'] = md5_file($arqTemp);

	// Pegamos as informações da imagem
	$info = @getimagesize($arqTemp);

	if ($info) {
		$return['width'] = $info[0];
		$return['height'] = $info[1];
		$return['mime'] = $info['mime'];
	}
} // fim do else


// Output
if (isset($_REQUEST['response']) && $_REQUEST['response'] == 'xml') {
	// Really dirty, use DOM and CDATA section!
	echo '<response>';
	foreach ($return as $key => $value) {
		echo "<$key><![CDATA[$value]]></$key>";
	}
	echo '</response>';
} else {
	echo json_encode($return);
}
?>

[script.php] INCLUSO O MEU CÓDIGO (Arquivo funcionando e exibindo a mensagem de erro)

<?php
set_time_limit(0); // Deixa o tempo de execução do script ilimitado
include('class.imghandler.php'); // Classe de Manipulação das fotos
include('../conexao2.php'); // Conecta ao BD

/*/ Pega os dados do evento pelo ID no BD
$id = $_POST['id'];
$query_rs_galeria = "SELECT * FROM galeria WHERE id = ".$id.";";
$rs_galeria 	= mysql_query($query_rs_galeria) or die("Erro ao efetuar a consulta no BD: ".mysql_error());
$row_rs_galeria = mysql_fetch_assoc($rs_galeria);

$data_inversa = $row_rs_galeria['data_inversa']; // Pasta do evento pela data invertida
$local = $row_rs_galeria['local']; // Nome da pasta do local
*/

// Dados da Imagem
$arqName 	= $_FILES['Filedata']['name']; // Nome do arquivo original
$arqTemp 	= $_FILES['Filedata']['tmp_name']; // Nome do arquivo temporário
$arqError 	= $_FILES['Filedata']['error']; // Informações de erro
$arqType 	= $_FILES['Filedata']['type']; // Tipo de Arquivo
$arqSize 	= $_FILES['Filedata']['size']; // Tamanho do Arquivo
$img = $arqTemp;

// Informações das pastas
$pasta = './temp/'; // Pasta temporária
$pasta_originais = "./originais/maikai_show_bar/20090826/"; // Pasta das fotos originais
$pasta_evento = "./eventos/maikai_show_bar/20090826/"; // Pasta das fotos com marca d'agua
$pasta_thumbs = "./eventos/maikai_show_bar/20090826/thumbs/"; // Pasta das miniaturas

// Validação
$error = false;

if (!isset($_FILES['Filedata']) || !is_uploaded_file($arqTemp)) {
	$error = 'Envio Inválido!';
}

// Verifica se a foto é menor que 8 MB
if (!$error && $arqSize > 8 * 1024 * 1024){
	$error = 'Por favor, envie somente fotos menores que 8 MB!';
}

// Verifica se é uma imagem
if (!$error && !($size = @getimagesize($arqTemp))){
	$error = 'Por favor, envie somente fotos, pois nenhum outor tipo de arquivo é permitido!';
}

// Verifica o tipo de arquivo da imagem
if (!$error && !in_array($size[2], array(1, 2, 3, 7, 8))){
	$error = 'Por favor, envie somente imagens do tipo: JPEG, GIF ou PNG.'; 
}

// Verifica o tamanho mínimo das dimensões das fotos
if (!$error && ($size[0] < 400) || ($size[1] < 400)){
	$error = 'Por favor, envie uma foto maior que 400 px';
}

if ($error) {
	$return = array(
		'status' => '0',
		'error' => $error
	);

} else {
	$return = array(
		'status' => '1',
		'name' => $arqName
	);

	// Pegamos o valor do HASH do arquivo
	$return['hash'] = md5_file($arqTemp);

	// Pegamos as informações da imagem
	$info = @getimagesize($arqTemp);

	if ($info) {
		$return['width'] = $info[0];
		$return['height'] = $info[1];
		$return['mime'] = $info['mime'];
	}
	// -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
	// INÍCIO DO PROCESSAMENTO DAS FOTOS
	// -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
	
	//  PASSO 1 - TRATANDO O NOME DO ARQUIVO
		// Extensão do arquivo
		$extensao = explode('.', $arqName);
		$extensao = strtolower(end($extensao));
		// Pegar nome do arquivo
		$nome = explode(".", $arqName);
		$nome = $nome[0];
		$nome = preg_replace("[^a-zA-Z0-9_]", "", strtr($nome, "áàãâéêíóôõúüçÁÀÃÂÉÊÍÓÔÕÚÜÇ ", "aaaaeeiooouucAAAAEEIOOOUUC_"));
		$nome = strtolower($nome);
		// Adiciona os números randômicos e monta novamente o nome do arquivo final
		$arqFoto = $nome.'.'.$extensao;
	
	
	// PASSO 2 - MOVENDO O ARQUIVO ORIGINAL PARA A PASTA "TEMP"
		// Move o arquivo para a pasta temporária
		if(move_uploaded_file($arqTemp, $pasta.$arqFoto)){
			$return['src'] = substr($pasta.$arqFoto,7);
			echo "Arquivo movido com sucesso!<br>";
		}else{
			echo "Erro ao mover!<br>";
		}
	
	
	// PASSO 3 - MANIPULAÇÃO DA FOTO
	$ImgHandler = new ImgHandler();
	$foto = $ImgHandler->ResizeImg( $pasta.$arqFoto );
	$ImgHandler->insertLogo( $foto ); // Insere a logomarca
	$ImgHandler->createThumb( $foto ); // Cria a miniatura

		// Define o novo nome para a foto com logomarca
		$marcada_antiga = substr($foto,7);
		$nome = explode(".", $arqFoto);
		$nome = $nome[0];
		$marcada_nova = $nome."_".$marcada_antiga;
		rename($pasta.$marcada_antiga, $pasta.$marcada_nova);
		
		// Define o novo nome para a miniatura
		$miniatura_antiga = substr($foto,7);
		$miniatura_antiga = explode(".", $miniatura_antiga);
		$extensao = strtolower(end($miniatura_antiga));
		$miniatura_antiga = $miniatura_antiga[0];
		$miniatura_antiga = $miniatura_antiga."_thumb.".$extensao;
		$miniatura_nova = $nome."_".$miniatura_antiga;
		rename($pasta.$miniatura_antiga, $pasta.$miniatura_nova);
		
	// PASSO 4 - COPIAR AS FOTOS PARA AS DEVIDAS PASTAS E DEPOIS DELETÁ-LAS DA PASTA "TEMP"
		// Original
		$original = $nome.".".$extensao;
		copy($pasta.$original, $pasta_originais.$original);
		unlink($pasta.$original);
		
		// Marcada
		copy($pasta.$marcada_nova, $pasta_evento.$marcada_nova);
		unlink($pasta.$marcada_nova);
		
		// Miniatura
		copy($pasta.$miniatura_nova, $pasta_thumbs.$miniatura_nova);
		unlink($pasta.$miniatura_nova);
	
	// -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
	// FIM DO PROCESSAMENTO DAS FOTOS
	// -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-

} // fim do else


// Output
if (isset($_REQUEST['response']) && $_REQUEST['response'] == 'xml') {
	// Really dirty, use DOM and CDATA section!
	echo '<response>';
	foreach ($return as $key => $value) {
		echo "<$key><![CDATA[$value]]></$key>";
	}
	echo '</response>';
} else {
	echo json_encode($return);
}
?>

Exemplo de saída quando uso o código LIMPO:

DSC03078.JPGImage was uploaded: 640 x 480px, image/jpeg)

Exemplo de saída quando uso com o meu código incluso:

DSC03078.JPGAn error occured: Arquivo movido com sucesso!
{"status":"1","name":"DSC03078.JPG","hash":"650def0ee751f7d2c69b6a2cee4ac2a7","width":640,"height":480,"mime":"image\/jpeg","src":"dsc03078.jpg"}

Diego Macêdo · Agosto 29, 2009

Alguém poderia me dizer onde eu devo incluir o ID para ele ser passado via POST?

Pois ao resgatar o ID pelo POST, ele está indo nulo.

<?php
include('../../includes/conexao.php');
$id	= $_GET['id'];

$query_rs_galeria = "SELECT * FROM galeria WHERE ID = ".$id.";";
$rs_galeria = mysql_query($query_rs_galeria) or die("Erro ao efetuar a consulta no BD: ".mysql_error());
$row_rs_galeria = mysql_fetch_assoc($rs_galeria);
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
	<title>Enviar Fotos</title>
	<script type="text/javascript" src="source/mootools.js"></script>
	<script type="text/javascript" src="source/Swiff.Uploader.js"></script>
	<script type="text/javascript" src="source/Fx.ProgressBar.js"></script>
	<script type="text/javascript" src="source/Lang.js"></script>
	<script type="text/javascript" src="source/FancyUpload2.js"></script>
	<!-- See script.js -->
	<script type="text/javascript">
		//<![CDATA[

		/**
 * FancyUpload Showcase
 *
 * @license		MIT License
 * @author		Harald Kirschner <mail [at] digitarald [dot] de>
 * @copyright	Authors
 */

window.addEvent('domready', function() { // wait for the content

	// our uploader instance 
	
	var up = new FancyUpload2($('demo-status'), $('demo-list'), { // options object
		// we console.log infos, remove that in production!!
		verbose: true,
		
		// url is read from the form, so you just have to change one place
		url: $('form-demo').action,
		
		// path to the SWF file
		path: 'source/Swiff.Uploader.swf',
		
		// remove that line to select all files, or edit it, add more items
		typeFilter: {
			'Images (*.jpg, *.jpeg, *.gif, *.png)': '*.jpg; *.jpeg; *.gif; *.png'
		},
		
		// this is our browse button, *target* is overlayed with the Flash movie
		target: 'demo-browse',
		
		// graceful degradation, onLoad is only called if all went well with Flash
		onLoad: function() {
			$('demo-status').removeClass('hide'); // we show the actual UI
			$('demo-fallback').destroy(); // ... and hide the plain form
			
			// We relay the interactions with the overlayed flash to the link
			this.target.addEvents({
				click: function() {
					return false;
				},
				mouseenter: function() {
					this.addClass('hover');
				},
				mouseleave: function() {
					this.removeClass('hover');
					this.blur();
				},
				mousedown: function() {
					this.focus();
				}
			});

			// Interactions for the 2 other buttons
			
			$('demo-clear').addEvent('click', function() {
				up.remove(); // remove all files
				return false;
			});

			$('demo-upload').addEvent('click', function() {
				up.start(); // start upload
				return false;
			});
		},
		
		// Edit the following lines, it is your custom event handling
		
		/**
		 * Is called when files were not added, "files" is an array of invalid File classes.
		 * 
		 * This example creates a list of error elements directly in the file list, which
		 * hide on click.
		 */ 
		onSelectFail: function(files) {
			files.each(function(file) {
				new Element('li', {
					'class': 'validation-error',
					html: file.validationErrorMessage || file.validationError,
					title: MooTools.lang.get('FancyUpload', 'removeTitle'),
					events: {
						click: function() {
							this.destroy();
						}
					}
				}).inject(this.list, 'top');
			}, this);
		},
		
		/**
		 * This one was directly in FancyUpload2 before, the event makes it
		 * easier for you, to add your own response handling (you probably want
		 * to send something else than JSON or different items).
		 */
		onFileSuccess: function(file, response) {
			var json = new Hash(JSON.decode(response, true) || {});
			
			if (json.get('status') == '1') {
				file.element.addClass('file-success');
				file.info.set('html', '<strong>Image was uploaded:</strong> ' + json.get('width') + ' x ' + json.get('height') + 'px, <em>' + json.get('mime') + '</em>)');
			} else {
				file.element.addClass('file-failed');
				file.info.set('html', '<strong>An error occured:</strong> ' + (json.get('error') ? (json.get('error') + ' #' + json.get('code')) : response));
			}
		},
		
		/**
		 * onFail is called when the Flash movie got bashed by some browser plugin
		 * like Adblock or Flashblock.
		 */
		onFail: function(error) {
			switch (error) {
				case 'hidden': // works after enabling the movie and clicking refresh
					alert('To enable the embedded uploader, unblock it in your browser and refresh (see Adblock).');
					break;
				case 'blocked': // This no *full* fail, it works after the user clicks the button
					alert('To enable the embedded uploader, enable the blocked Flash movie (see Flashblock).');
					break;
				case 'empty': // Oh oh, wrong path
					alert('A required file was not found, please be patient and we fix this.');
					break;
				case 'flash': // no flash 9+ :(
					alert('To enable the embedded uploader, install the latest Adobe Flash plugin.')
			}
		}
		
	});
	
});
		//]]>
	</script>
	<style type="text/css">
/* CSS vs. Adblock tabs */
.swiff-uploader-box a {
	display: none !important;
}

/* .hover simulates the flash interactions */
a:hover, a.hover {
	color: red;
}

#demo-status {
	padding: 10px 15px;
	width: 420px;
	border: 1px solid #eee;
}

#demo-status .progress {
	background: url(assets/progress-bar/progress.gif) no-repeat;
	background-position: +50% 0;
	margin-right: 0.5em;
	vertical-align: middle;
}

#demo-status .progress-text {
	font-size: 0.9em;
	font-weight: bold;
}

#demo-list {
	list-style: none;
	width: 450px;
	margin: 0;
}

#demo-list li.validation-error {
	padding-left: 44px;
	display: block;
	clear: left;
	line-height: 40px;
	color: #8a1f11;
	cursor: pointer;
	border-bottom: 1px solid #fbc2c4;
	background: #fbe3e4 url(assets/failed.png) no-repeat 4px 4px;
}

#demo-list li.file {
	border-bottom: 1px solid #eee;
	background: url(assets/file.png) no-repeat 4px 4px;
	overflow: auto;
}
#demo-list li.file.file-uploading {
	background-image: url(assets/uploading.png);
	background-color: #D9DDE9;
}
#demo-list li.file.file-success {
	background-image: url(assets/success.png);
}
#demo-list li.file.file-failed {
	background-image: url(assets/failed.png);
}

#demo-list li.file .file-name {
	font-size: 1.2em;
	margin-left: 44px;
	display: block;
	clear: left;
	line-height: 40px;
	height: 40px;
	font-weight: bold;
}
#demo-list li.file .file-size {
	font-size: 0.9em;
	line-height: 18px;
	float: right;
	margin-top: 2px;
	margin-right: 6px;
}
#demo-list li.file .file-info {
	display: block;
	margin-left: 44px;
	font-size: 0.9em;
	line-height: 20px;
	clear
}
#demo-list li.file .file-remove {
	clear: right;
	float: right;
	line-height: 18px;
	margin-right: 6px;
}	</style>


</head>
<body>

	<div class="container">
		<h2>Enviar Fotos para "<?php echo $row_rs_galeria['titulo']; ?>" - <?php echo $row_rs_galeria['local']; ?> (<?php echo $row_rs_galeria['data']; ?>)</h2>



		<!-- See index.html -->
<div>
			<form action="processar.php" method="post" enctype="multipart/form-data" id="form-demo">
	<fieldset id="demo-fallback">
    ID: <input name="id" type="text" value="<?php echo $id; ?>" size="10">
		<legend>File Upload</legend>
		<p>
			This form is just an example fallback for the unobtrusive behaviour of FancyUpload.
			If this part is not changed, something must be wrong with your code.
		</p>
		<label for="demo-photoupload">
			Upload a Photo:
			<input type="file" name="Filedata" />
		</label>
	</fieldset>

	<div id="demo-status" class="hide">
		<p>
			<a href="#" id="demo-browse">Adicionar Fotos</a> |
			<a href="#" id="demo-clear">Limpar Lista</a> |
			<a href="#" id="demo-upload">Começar o Envio!</a>
		</p>
		<div>
			<strong class="overall-title"></strong><br />
			<img src="../../assets/progress-bar/bar.gif" class="progress overall-progress" />
		</div>
		<div>
			<strong class="current-title"></strong><br />
			<img src="../../assets/progress-bar/bar.gif" class="progress current-progress" />
		</div>
		<div class="current-text"></div>
	</div>

	<ul id="demo-list"></ul>

</form>		</div>


	</div>
</body>
</html>

Matias Rezende · Agosto 30, 2009

Diego, uma leitura com um pouco de atenção e achei...

 ID: <input name="id" type="text" value="<?php echo $id; ?>" size="10">

Carlos Eduardo

Diego Macêdo · Agosto 30, 2009

Sim Carlos, isso eu que botei ali. É exatamente que quero saber se está correto, pois quando eu boto esse sistema pra funcionar, ele não ta passando o ID para a página "processar.php":

<form action="processar.php" method="post" enctype="multipart/form-data" id="form-demo">

Quando eu tento coletar o valor na página processar.php ele está nulo:

[PROCESSAR.PHP]

$id_evento = $_POST['id'];
echo "ID: ".$id_evento; // Valor NULO
$query_rs_galeria = "SELECT * FROM galeria WHERE ID = ".$id_evento.";"; // Consulta VAZIA
$rs_galeria 	= mysql_query($query_rs_galeria) or die("Erro ao efetuar a consulta no BD: ".mysql_error());

Matias Rezende · Agosto 30, 2009

Ele está nulo porque a $id não está preenchendo nada dentro do value do campo hidden. Para confirmar, execute e confira direto no html gerado.

Carlos Eduardo

Diego Macêdo · Agosto 30, 2009

Está preenchendo sim Carlos, eu já conferi no código-fonte! http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Segue abaixo o resultado do HTML após abrir a página PHP (veja o valor 56, que foi passado pelo GET):

<form action="processar.php" method="post" enctype="multipart/form-data" id="form-demo">
    <input name="id_evento" type="hidden" value="56">

	<fieldset id="demo-fallback">
		<legend>File Upload</legend>
		<p>
			This form is just an example fallback for the unobtrusive behaviour of FancyUpload.
			If this part is not changed, something must be wrong with your code.
		</p>
		<label for="demo-photoupload">
			Upload a Photo:
			<input type="file" name="Filedata" />
		</label>

	</fieldset>

	<div id="demo-status" class="hide">
		<p>
		 	<a href="#" id="demo-browse">Adicionar Fotos</a> |
			<a href="#" id="demo-clear">Limpar Lista</a> |
			<a href="#" id="demo-upload">Começar o Envio!</a>

		</p>
		<div>
	    <strong class="overall-title"></strong><br />
			<img src="../../assets/progress-bar/bar.gif" class="progress overall-progress" />
		</div>
		<div>
			<strong class="current-title"></strong><br />
			<img src="../../assets/progress-bar/bar.gif" class="progress current-progress" />
		</div>

		<div class="current-text"></div>
	</div>

	<ul id="demo-list"></ul>
</form>

É tanto que ele está fazendo a consulta corretamente no BD e tudo mais. O problema não está sendo pegar a ID na página UPLOAD.PHP mas sim passar da UPLOAD para a PROCESSAR.PHP, entede?

Na página UPLOAD ele recebe o ID corretamente e preenche onde deve preencher na hora de fazer a consulta e também dentro da value do form no campo input-hidden.

Matias Rezende · Agosto 31, 2009

O nome do campo é id_evento, e não id.

Troque isto

$id_evento = $_POST['id'];

Por isto

$id_evento = $_POST['id_evento'];

Deve funcionar

Carlos Eduardo

Diego Macêdo · Agosto 31, 2009

Não funcionou ainda mesmo assim.. Veja abaixo:

UPLOAD.PHP

<?php
session_start();
include('../../includes/conexao.php');
if (isset($_GET['id']))
{
    $_SESSION['id_evento'] = $_GET['id'];
	$id = $_SESSION['id_evento'];
}
$query_rs_galeria = "SELECT * FROM galeria WHERE ID = ".$id.";";
$rs_galeria = mysql_query($query_rs_galeria) or die("Erro ao efetuar a consulta no BD: ".mysql_error());
$row_rs_galeria = mysql_fetch_assoc($rs_galeria);
error_reporting (E_ALL);
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en" xml:lang="en">
<head>
...
...
...
<form action="processar.php" method="post" enctype="multipart/form-data" id="form-demo">
    <input name="id_evento" type="hidden" value="<?php echo $_SESSION['id']; ?>">
	<fieldset id="demo-fallback">
		<legend>File Upload</legend>
		<p>
			This form is just an example fallback for the unobtrusive behaviour of FancyUpload.
			If this part is not changed, something must be wrong with your code.
		</p>
		<label for="demo-photoupload">
			Upload a Photo:
			<input type="file" name="Filedata" />
		</label>
	</fieldset>

	<div id="demo-status" class="hide">
		<p>
		 	<a href="#" id="demo-browse">Adicionar Fotos</a> |
			<a href="#" id="demo-clear">Limpar Lista</a> |
			<a href="#" id="demo-upload">Começar o Envio!</a>
		</p>
		<div>
	    <strong class="overall-title"></strong><br />
			<img src="../../assets/progress-bar/bar.gif" class="progress overall-progress" />
		</div>
		<div>
			<strong class="current-title"></strong><br />
			<img src="../../assets/progress-bar/bar.gif" class="progress current-progress" />
		</div>
		<div class="current-text"></div>
	</div>

	<ul id="demo-list"></ul>
</form>

Nesta linha está sendo preenchida de forma correta:
CÓDIGO: <input name="id_evento" type="hidden" value="<?php echo $_SESSION['id']; ?>">
RESULTADO : <input name="id_evento" type="hidden" value="56">

Já na página PROCESSAR.PHP:

<?php
session_start();
set_time_limit(0); // Deixa o tempo de execução do script ilimitado

// Pega os dados do evento pelo ID no BD
if (isset($_SESSION['id_evento']))
{
    $id_sessao = $_SESSION['id_evento'];
}
if (isset($_POST['id_evento']))
{
	$id_post = $_POST['id_evento'];
}
echo "Sessão: ".$id_sessao." POST: ".$id_post;
include('class.imghandler.php'); // Classe de Manipulação das fotos
include('../conexao.php'); // Conecta ao BD
error_reporting (E_ALL);
$query_rs_galeria = "SELECT * FROM galeria WHERE ID = ".$_SESSION['id'].";";
$rs_galeria 	= mysql_query($query_rs_galeria) or die("Erro ao efetuar a consulta no BD: ".mysql_error());
$row_rs_galeria = mysql_fetch_assoc($rs_galeria);

$data_inversa = $row_rs_galeria['data_inversa']; // Pasta do evento pela data invertida
$local = $row_rs_galeria['local']; // Nome da pasta do local
...

Resultado (Consulta vazia):

An error occured: Sessão: POST:
Notice: Undefined index: id in /home/agito/public_html/cidade/admin/galeria/processar.php on line 18
Erro ao efetuar a consulta no BD: You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near '' at line 1

Matias Rezende · Agosto 31, 2009

Coloque este código no início do processar.php

<?php
echo '<pre>';
print_r($_POST);
exit('</pre>');
session_start();
set_time_limit(0); // Deixa o tempo de execução do script ilimitado

Veja o que retorna

Carlos Eduardo

Diego Macêdo · Agosto 31, 2009

Carlos,

resultado:

An error occured:

Array
(
    [Filename] => DSC03224.jpg
    [Upload] => Submit Query
)

Olha só, eu estive vendo o fórum do desenvolvedor deste script e descobri o problema. Realmente ele não envia as informações que eu botar pelo POST, GET, SESSION ou COOKIES, pois quem faz o upload mesmo do arquivo é um arquivo em flash (por isso que não passas as informações).

LINK

Para passar alguma informação adicional, eu teria que incrementar no código javascript desta forma:

data: $('id_evento').toQueryString()
- EDIT - 
Não funcionou isso, pois após eu adicionar essa linha no javascript, ele parou de funcionar. Quando eu retiro ele funciona.

Onde o formulário está com isso:

<input name="id_evento" type="hidden" value="<?php echo $id_evento; ?>">

Creio que seja algo relacionado a passar esse dado para o DOM, pois o sistema utiliza AJAX.

Agora a minha pergunta é:

Como eu capturo esse dado que foi passado pelo javascript (DOM) na outra página "processar.php"?

O javascript ficou assim:

window.addEvent('domready', function() { // wait for the content

	// our uploader instance 
	
	var up = new FancyUpload2($('demo-status'), $('demo-list'), { // options object
                // Passar informação adicional
                data: $('id_evento').toQueryString(),

		// we console.log infos, remove that in production!!
		verbose: true,
		
		// url is read from the form, so you just have to change one place
		url: $('form-demo').action,
		
		// path to the SWF file
		path: 'source/Swiff.Uploader.swf',
		
		// remove that line to select all files, or edit it, add more items
		typeFilter: {
			'Images (*.jpg, *.jpeg)': '*.jpg; *.jpeg'
		},
		
		// this is our browse button, *target* is overlayed with the Flash movie
		target: 'demo-browse',
		...
                ...
                ...

Veja aqui a documentação deste script.

sirlantj · Janeiro 12, 2010

Brother tive esse mesmo problema que você, custei a achar como fazer mais vou colocar ai pra galera pois esse é um script muito util.

depois da linha url: $('form-demo').action,

você coloca data: 'id_evento='+$('idevento').get('value'),

lembrando que dentro do form voce tem que ter um campo com esse nome recebendo o valor desejado. Valeu

duca041 · Dezembro 6, 2010

Mesmo problema e nada de passar esse id

Funcionou com esse código acima pessando pela url?

M. Simão · Janeiro 12, 2011

Oi pessoal,

Alguém conseguiu encontrar alguma maneira de passar conteúdo adicional via $_POST para o script PHP que processa o que vem do FancyUpload?

Como o Diego falou, também tentei essa solução que aparece no site do desenvolvedor:

data: $('id-do-form').toQueryString()

Mas quando eu adiciono essa linha o script para de responder.

Qualquer dica será bem-vinda!

Patrick Jonas · Março 29, 2011

Todos com o mesmo problema!!

Estou a uma semana encima disso e não consigo encontrar uma solução. Se alguém conseguiu, por favor compartilhe com o restante do pessoal.

Valeu!

Diego Macêdo · Março 29, 2011

Bom, vou postar meu código aqui pra você verem como eu fiz e fazer o entendimento de vocês pras próprias necessidades:

window.onload = function() {
			var settings = {
				flash_url : "swfupload/swfupload.swf",
				upload_url: "galeriaupload2.php",
				post_params: {"id_galeria" : "<?php echo $_POST['id_galeria']; ?>", "id_logo" : "<?php echo $_POST['id_logo']; ?>"},
				file_size_limit : "8 MB",
				file_types : "*.jpg",
				file_types_description : "Fotos",
				file_upload_limit : 0,
				file_queue_limit : 0,
				custom_settings : {
					progressTarget : "fsUploadProgress",
					cancelButtonId : "btnCancel"
				},

Vejam que no "post_params:" eu criei vário argumentos para serem passados utilizando a virgula apenas para separá-los, e associo os dados passados pelo POST para incluir de forma dinâmica.

Acho que isso já vai ajudar os que estão travados no código.

tony_lu · Março 29, 2011

Boa tarde galera, tudo bem?

Vou dar a minha contribuição neste topico, uma video aula de Multiplos Uploads, que apliquei este recurso em alguns sites:

http://www.sosdesigners.com/artigo/upload-multiplo-de-imagens

Abs!

Cardon · Setembro 2, 2011

Tente colocar campos na action do form, dinamicamente.

Creio que foi isso que fiz ao tentar resolver esse problema, lembro-me que funcionou heheheh

<form action="server/script.php?id=<? echo $id; ?>" method="post" enctype="multipart/form-data" id="form-demo">

Com o method post, essa url da action do form, não sera renovada, sendo assim, envia com todas as parafernalhas que forem colocadas após o "?"

Creio que foi isso que eu fiz para resolver.

Arquivado

Erro com Upload Múltiplos Arquivos (Fancy Upload)

Recommended Posts

Diego Macêdo 6

Compartilhar este post

Link para o post

Compartilhar em outros sites

Diego Macêdo 6

Compartilhar este post

Link para o post

Compartilhar em outros sites

Matias Rezende 50

Compartilhar este post

Link para o post

Compartilhar em outros sites

Diego Macêdo 6

Compartilhar este post

Link para o post

Compartilhar em outros sites

Matias Rezende 50

Compartilhar este post

Link para o post

Compartilhar em outros sites

Diego Macêdo 6

Compartilhar este post

Link para o post

Compartilhar em outros sites

Matias Rezende 50

Compartilhar este post

Link para o post

Compartilhar em outros sites

Diego Macêdo 6

Compartilhar este post

Link para o post

Compartilhar em outros sites

Matias Rezende 50

Compartilhar este post

Link para o post

Compartilhar em outros sites

Diego Macêdo 6

Compartilhar este post

Link para o post

Compartilhar em outros sites

sirlantj 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

duca041 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

M. Simão 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Patrick Jonas 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Diego Macêdo 6

Compartilhar este post

Link para o post

Compartilhar em outros sites

tony_lu 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Cardon 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Conexão mysql com outro domínio

[Resolvido] JavaScript - Exibir logo dentro da Tabela html

Javascript - Calcular Valores Monetário em Tempo Real

Fóruns

Tempo Real

Informação importante