Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Bruno Gayet

[Resolvido] Upload multiplo

Por , em Javascript

Recommended Posts

Bruno Gayet    0

Bruno Gayet
Postado

Olá pessoal, tenho um código copiado da net para fazer multiplos uploads de fotos. a questão é a seguinte, ele funciona perfeitamente mas quero incrementar mais coisas. A hora que o código upa para o servidor e traz a miniatura para colocarmos uma legenda na foto eu queria que trouxesse também logo abaixo um campo TEXTAREA para poder colocar a descrição da foto e não estou conseguindo! se alguem poder me ajudar segue abaixo o código.

 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
	<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>
	
	<script type="text/javascript">
		var uploader = "";

		$(function() {
			$("#album").submit(function() {
				// Não continue caso já exista uma instância do multiUploader
				if (typeof uploader == "object")
					return false;

				var data = $(this).serialize(); // Dados do formulário

				$(":text,textarea").attr("disabled", "disabled"); // Desabilitar os textos

				// Envia o formulário via Ajax
				$.ajax({
					type: "POST",
					url: "savealbum.php",
					data: data,
					cache: false,
					dataType: "json",
					success: function(json)
					{
						if (json.id > 0) // Se recebemos um id então o álbum foi salvo com sucesso
						{
							// Cria uma instância do multiUpload
							uploader = new multiUpload('uploader', 'uploader_files', {
								swf:             '../../swf/multiUpload.swf',
								script:          'upload.php',
								expressInstall:  '../../swf/expressInstall.swf',
								multi:           true,
								data:            json, // Envia a variável json para o script de upload (com o id do álbum)
								fileDescription: 'JPEG Images',
								fileExtensions:  '*.jpg;*.jpeg',
								onComplete:      function(e)
								{
									var id = e.data; // O id retornado
									var file = $("#file_"+e.id+" div:first").text(); // Nome do arquivo
									var ext = file.split('.').pop(); // Extensão do arquivo
									var thumb = file.replace('.'+ext, '_thumb.'+ext); // Miniatura
									var $caption = $('<div class="caption" rel="'+id+'"><input type="text" name="Caption" value="Legenda da imagem" /></div>');
									var $button = $('<input type="button" value="Salvar" class="save" />').click(function() {
										$.post("savecaption.php", { id: $(this).parent().attr("rel"), caption: $(this).prev().val() }, function(data){
											$caption.html('<strong>'+data+'</strong>');
										});
									});
									$("#file_"+e.id+" div:first").prepend('<img src="../../uploads/'+thumb+'" width="64" height="48" />')
										.append($caption.append($button));
								}
							});

							// Cria o html base para listagem dos arquivos selecionados e barra de progresso
							uploader.createBaseHtml();

							// Mostra as ações (Iniciar Upload, limpar fila)
							$(".upload_actions").show();
						}
						else // Caso o álbum não seja salvo
						{
							$(":text,textarea").removeAttr("disabled"); // Habilita os textos novamente
							alert(json.msg); // Mostra a mensagem de erro retornada
						}
					}
				});

				return false; // Previne o form de ser enviado pela forma normal
			});

			$(":text,textarea").removeAttr("disabled");
		});
	</script>

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

</head>

<body>

	<h1>Álbum de Fotos 2 - multiUpload</h1>

	<p>< <a href="../">Voltar para os exemplos</a></p>

	<br />

	<h4>Novo Álbum</h4>

	<br />

	<form method="post" action="savealbum.php" id="album">

		<label>Título:</label> <input type="text" name="title" size="25" maxlength="50" />

		<label>Descrição:</label> <textarea name="description" rows="5" cols="25"></textarea>

		<br /><br />

		<input type="submit" value="SALVAR" />

	</form>

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

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

	<br style="clear:both" />

	<div class="upload_actions"><a href="javascript:uploader.startUpload();">Iniciar Upload</a> | <a href="javascript:uploader.clearUploadQueue();">Limpar fila de Upload</a> | <a href="./">Novo Álbum</a></div>

esse é o código da página que recebe a legenda da foto.

<?php
/**
 * Conexão Mysql
 */
$conn = mysql_connect('localhost', 'root', '');
$db   = mysql_select_db('album');

$id = $_POST['id'];
$caption = addslashes($_POST['caption']);

if (!empty($caption))
{
	$query = "UPDATE albums_photos SET caption = '$caption' WHERE id = $id";

	if (mysql_query($query))
		die($caption);
}

die("Erro");
?>

Bom pessoal, estou começando agora com o ajax e se alguem interessar pela minha causa, eu agradeceria muito pois é com urgência. Abraços!

Os créditos do código fica para FREDI MACHADO.

Compartilhar este post

Link para o post
Compartilhar em outros sites

zrod    0

zrod
Postado

No seu HTML a textarea possui o atributo 'name' igual a 'description'.

Porém seu PHP procura por 'caption'.

 

Tente:

Altere o atributo 'name' da textarea no seu HTML para 'caption'

OU

Altere o seu PHP:

// DE
$caption = addslashes($_POST['caption']);
// PARA
$caption = addslashes($_POST['description']);

Compartilhar este post

Link para o post
Compartilhar em outros sites

Beto Lima    0

Beto Lima
Postado

amigo, você teria como postar o script para download?

eu tenho o mesmo exemplo, e quando vou ver a imagem postada, a mesma fica corrompida.

não é possível ver nada, nenhum arquivo. eles vão pra pasta mas vai bugado.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito