Ir para conteúdo

POWERED BY:

Arquivado

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

NetBoy16

[Resolvido] file upload

Recommended Posts

Pessoal, to com uma duvida, to usando esse plugin jquery, já procurei na documentação mas não achei nada, eu quero fazer 2 coisas:

 

- limitar o numero de arquivos pra 6

- gravar cada arquivo em uma variável(arquivo 1 no $foto, arquivo 2 no $foto2...) e quando o cara clicar no botão cadastrar, enviar pro banco de dados

 

o primeiro eu já achei na documentação e sei fazer, só o segundo que não sei, alguém pode e ajudar por favor ?

Compartilhar este post


Link para o post
Compartilhar em outros sites

trabalhe com array:

 

$foto[0]

$foto[1]

$foto[2]

..

 

e assim por diante.

Não precisa alterar nada no script, apenas aprender a trabalhar com arrays.(provavelmente o script já te devolve assim)

Compartilhar este post


Link para o post
Compartilhar em outros sites

mas você tem exemplo de como ficaria o codigo ?

Compartilhar este post


Link para o post
Compartilhar em outros sites

não, não tenho exemplos.

http://wbruno.com.br/blog/2011/08/25/nao-busque-exemplos-esqueca-os-tutoriais/

 

tente fazer e volte com as suas dúvidas.

Compartilhar este post


Link para o post
Compartilhar em outros sites

entao, eu consegui, soh tenho mais uma duvida, segue o codigo:

 

$(document).ready(function() {
  $("#foto1").fileUpload({
     'uploader': 'uploader.swf',
     'cancelImg': 'cancel.png',
     [b]'onComplete':function(){ document.write('aqui'); },[/b]
     'folder': 'upload',
     'script': 'upload.php',
     'fileDesc': 'Image Files',
     'fileExt': '*.jpg;*.jpeg;*.gif;*.png',
     'buttonText' : 'Importar',
     'auto': true,
     'scriptData' : {'variavel':'foto1'}

  });


  $("#foto2").fileUpload({
     'uploader': 'uploader.swf',
     'cancelImg': 'cancel.png',
     'folder': 'upload',
     'script': 'upload.php',
     'fileDesc': 'Image Files',
     'fileExt': '*.jpg;*.jpeg;*.gif;*.png',
  'buttonText' : 'Importar',
     'auto': true,
     'scriptData' : {'variavel':'foto2'}
  });   


     $("#foto3").fileUpload({
     'uploader': 'uploader.swf',
     'cancelImg': 'cancel.png',
     'folder': 'upload',
     'script': 'upload.php',
     'fileDesc': 'Image Files',
     'fileExt': '*.jpg;*.jpeg;*.gif;*.png',
  'buttonText' : 'Importar',
     'auto': true,
     'scriptData' : {'variavel':'foto3'}
  });

     $("#foto4").fileUpload({
     'uploader': 'uploader.swf',
     'cancelImg': 'cancel.png',
     'folder': 'upload',
     'script': 'upload.php',
     'fileDesc': 'Image Files',
     'fileExt': '*.jpg;*.jpeg;*.gif;*.png',
  'buttonText' : 'Importar',
     'auto': true,
     'scriptData' : {'variavel':'foto4'}
  });

     $("#foto5").fileUpload({
     'uploader': 'uploader.swf',
     'cancelImg': 'cancel.png',
     'folder': 'upload',
     'script': 'upload.php',
     'fileDesc': 'Image Files',
     'fileExt': '*.jpg;*.jpeg;*.gif;*.png',
     'buttonText' : 'Importar',
     'auto': true,
     'scriptData' : {'variavel':'foto1'}
  });

     $("#foto6").fileUpload({
     'uploader': 'uploader.swf',
     'cancelImg': 'cancel.png',
     'folder': 'upload',
     'script': 'upload.php',
     'fileDesc': 'Image Files',
     'fileExt': '*.jpg;*.jpeg;*.gif;*.png',
     'buttonText' : 'Importar',
     'auto': true,
     'scriptData' : {'variavel':'foto5'}
  });





});

 

Observe o codigo em negrito, ele vai pra outra pagina, queria que mostrasse a mensagem na propria pagina, como faco isso ?

Compartilhar este post


Link para o post
Compartilhar em outros sites

Desculpe dizer, mas dando um ID para cada input, você fez da forma mais errada possível.

 

E se forem 10 ? e se forem 20 ?

vai duplicar o script 20 vezes ?..

 

 

Respondendo a sua dúvida, basta ter um id="resposta", e:

'onComplete':function(){ $('#resposta').html('pronto'); },

Compartilhar este post


Link para o post
Compartilhar em outros sites

mas o alert ele abre uma janelinha, eu quero que mostre ali, digamos...no html

 

basta ter um id="resposta"

 

 

como assim ter um id resposta? ter uma tag p com id resposta?

Compartilhar este post


Link para o post
Compartilhar em outros sites

vlw bruno, deu certo, olha como ficou:

 

<script type="text/javascript">
$(document).ready(function() {
  $("#foto1").fileUpload({
     'uploader': 'uploader.swf',
     'cancelImg': 'cancel.png',
  'onComplete':function(){ $('#msg1').html('pronto'); },
     'folder': 'upload',
     'script': 'upload.php',
     'fileDesc': 'Image Files',
     'fileExt': '*.jpg;*.jpeg;*.gif;*.png',
     'buttonText' : 'Importar',
     'auto': true,
     'scriptData' : {'variavel':'foto1'}

  });


  $("#foto2").fileUpload({
     'uploader': 'uploader.swf',
     'cancelImg': 'cancel.png',
  'onComplete':function(){ $('#msg2').html('pronto'); },
     'folder': 'upload',
     'script': 'upload.php',
     'fileDesc': 'Image Files',
     'fileExt': '*.jpg;*.jpeg;*.gif;*.png',
  'buttonText' : 'Importar',
     'auto': true,
     'scriptData' : {'variavel':'foto2'}
  });   


     $("#foto3").fileUpload({
     'uploader': 'uploader.swf',
     'cancelImg': 'cancel.png',
  'onComplete':function(){ $('#msg3').html('pronto'); },
     'folder': 'upload',
     'script': 'upload.php',
     'fileDesc': 'Image Files',
     'fileExt': '*.jpg;*.jpeg;*.gif;*.png',
  'buttonText' : 'Importar',
     'auto': true,
     'scriptData' : {'variavel':'foto3'}
  });

     $("#foto4").fileUpload({
     'uploader': 'uploader.swf',
     'cancelImg': 'cancel.png',
  'onComplete':function(){ $('#msg4').html('pronto'); },
     'folder': 'upload',
     'script': 'upload.php',
     'fileDesc': 'Image Files',
     'fileExt': '*.jpg;*.jpeg;*.gif;*.png',
  'buttonText' : 'Importar',
     'auto': true,
     'scriptData' : {'variavel':'foto4'}
  });

     $("#foto5").fileUpload({
     'uploader': 'uploader.swf',
     'cancelImg': 'cancel.png',
  'onComplete':function(){ $('#msg5').html('pronto'); },
     'folder': 'upload',
     'script': 'upload.php',
     'fileDesc': 'Image Files',
     'fileExt': '*.jpg;*.jpeg;*.gif;*.png',
     'buttonText' : 'Importar',
     'auto': true,
     'scriptData' : {'variavel':'foto1'}
  });

     $("#foto6").fileUpload({
     'uploader': 'uploader.swf',
     'cancelImg': 'cancel.png',
  'onComplete':function(){ $('#msg6').html('pronto'); },
     'folder': 'upload',
     'script': 'upload.php',
     'fileDesc': 'Image Files',
     'fileExt': '*.jpg;*.jpeg;*.gif;*.png',
     'buttonText' : 'Importar',
     'auto': true,
     'scriptData' : {'variavel':'foto5'}
  });





});
</script>

<p><input name="foto1" id="foto1" type="file" /><input type=hidden name=imagem1 value="<?=$targetFile?>"></p>

<p id="msg1"></p>

<p><input name="foto2" id="foto2" type="file" /><input type=hidden name=imagem1 value="<?=$targetFile?>"></p>

<p id="msg2"></p>

<p><input name="foto3" id="foto3" type="file" /><input type=hidden name=imagem1 value="<?=$targetFile?>"></p>

<p id="msg3"></p>

<p><input name="foto4" id="foto4" type="file" /><input type=hidden name=imagem1 value="<?=$targetFile?>"></p>

<p id="msg4"></p>

<p><input name="foto5" id="foto5" type="file" /><input type=hidden name=imagem1 value="<?=$targetFile?>"></p>

<p id="msg5"></p>

<p><input name="foto6" id="foto6" type="file" /><input type=hidden name=imagem1 value="<?=$targetFile?>"></p>

<p id="msg6"></p>

 

 

Sobre o erro, eu nao tenho culpa '-' , eu peguei o codigo pronto que um outro programador fez e soh precisei fazer isso pois ele n entende muito de js, e sim, os arquivos sao enviados via $_POST ^^

 

e vlw gremio :)

Compartilhar este post


Link para o post
Compartilhar em outros sites

soh mais uma duvida, eu nao to conseguindo cadastrar no banco de dados, ele envia as fotos pro servidor mas nao cadastra no banco de dados,eu mandei mostrar o $sql e os values estao vazios, vou colocar o codigo aqui e se alguém puder ajudar eu fico grato.

 

codigo do form:

<?php
session_register ("cont");
session_register ("foto");
session_register ("foto2");
session_register ("foto3");
session_register ("foto4");
session_register ("foto5");
session_register ("foto6");


?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Flash Upload Test</title>
<script type="text/javascript" src="http://www.shiguenori.com/jquery/jquery-1.3.1.js"></script>
<script type="text/javascript" src="jquery.fileupload.js"></script>
<script type="text/javascript">
$(document).ready(function() {
  $("#foto1").fileUpload({
     'uploader': 'uploader.swf',
     'cancelImg': 'cancel.png',
  'onComplete':function(){ $('#msg1').html('<img src="homehost_ok.png" alt="ok" height="16" width="16" /> Foto 1 enviada com sucesso !'); },
     'folder': 'upload',
     'script': 'upload.php',
     'fileDesc': 'Image Files',
     'fileExt': '*.jpg;*.jpeg;*.gif;*.png',
     'buttonText' : 'Importar',
     'auto': true,
     'scriptData' : {'variavel':'foto1'}

  });


  $("#foto2").fileUpload({
     'uploader': 'uploader.swf',
     'cancelImg': 'cancel.png',
  'onComplete':function(){ $('#msg2').html('<img src="homehost_ok.png" alt="ok" height="16" width="16" /> Foto 2 enviada com sucesso !'); },
     'folder': 'upload',
     'script': 'upload.php',
     'fileDesc': 'Image Files',
     'fileExt': '*.jpg;*.jpeg;*.gif;*.png',
  'buttonText' : 'Importar',
     'auto': true,
     'scriptData' : {'variavel':'foto2'}
  });   


     $("#foto3").fileUpload({
     'uploader': 'uploader.swf',
     'cancelImg': 'cancel.png',
  'onComplete':function(){ $('#msg3').html('<img src="homehost_ok.png" alt="ok" height="16" width="16" /> Foto 3 enviada com sucesso !'); },
     'folder': 'upload',
     'script': 'upload.php',
     'fileDesc': 'Image Files',
     'fileExt': '*.jpg;*.jpeg;*.gif;*.png',
  'buttonText' : 'Importar',
     'auto': true,
     'scriptData' : {'variavel':'foto3'}
  });

     $("#foto4").fileUpload({
     'uploader': 'uploader.swf',
     'cancelImg': 'cancel.png',
  'onComplete':function(){ $('#msg4').html('<img src="homehost_ok.png" alt="ok" height="16" width="16" /> Foto 4 enviada com sucesso !'); },
     'folder': 'upload',
     'script': 'upload.php',
     'fileDesc': 'Image Files',
     'fileExt': '*.jpg;*.jpeg;*.gif;*.png',
  'buttonText' : 'Importar',
     'auto': true,
     'scriptData' : {'variavel':'foto4'}
  });

     $("#foto5").fileUpload({
     'uploader': 'uploader.swf',
     'cancelImg': 'cancel.png',
  'onComplete':function(){ $('#msg5').html('<img src="homehost_ok.png" alt="ok" height="16" width="16" /> Foto 5 enviada com sucesso !'); },
     'folder': 'upload',
     'script': 'upload.php',
     'fileDesc': 'Image Files',
     'fileExt': '*.jpg;*.jpeg;*.gif;*.png',
     'buttonText' : 'Importar',
     'auto': true,
     'scriptData' : {'variavel':'foto1'}
  });

     $("#foto6").fileUpload({
     'uploader': 'uploader.swf',
     'cancelImg': 'cancel.png',
  'onComplete':function(){ $('#msg6').html('<img src="homehost_ok.png" alt="ok" height="16" width="16" /> Foto 6 enviada com sucesso !'); },
     'folder': 'upload',
     'script': 'upload.php',
     'fileDesc': 'Image Files',
     'fileExt': '*.jpg;*.jpeg;*.gif;*.png',
     'buttonText' : 'Importar',
     'auto': true,
     'scriptData' : {'variavel':'foto5'}
  });





});
</script>
<style>
/* CSS PARA ESTILIZAR A BARRA DE PROGRESSO */
body {
  font: 12px/18px Arial, Helvetica, sans-serif;
}
.fileUploadQueueItem {
  font: 11px Verdana, Geneva, sans-serif;
  background-color: #F5F5F5;
  border: 3px solid #E5E5E5;
  margin-top: 5px;
  padding: 10px;
  width: 300px;
}
.fileUploadQueueItem .cancel {
  float: right;
}
.fileUploadProgress {
  background-color: #FFFFFF;
  border-top: 1px solid #808080;
  border-left: 1px solid #808080;
  border-right: 1px solid #C5C5C5;
  border-bottom: 1px solid #C5C5C5;
  margin-top: 10px;
  width: 100%;
}
.fileUploadProgressBar {
  background-color: #0099FF;
}
</style>

</head>
<body>
<form   method="post" action="add_teste.php" enctype="multipart/form-data">

<h1>JQuery FileUpload - Exemplo</h1>

<h2>Envio unico, autostart e apenas imagens</h2>
<p> </p>

<p><input name="foto1" id="foto1" type="file" /><input type=hidden name=imagem1 value="<?=$targetFile?>"></p><div id="msg1" style="color:lime; position:absolute; top: 120px; left: 135px"></div>



<p><input name="foto2" id="foto2" type="file" /><input type=hidden name=imagem1 value="<?=$targetFile?>"></p><div id="msg2" style="color:lime; position:absolute; top: 160px; left: 135px"></div>



<p><input name="foto3" id="foto3" type="file" /><input type=hidden name=imagem1 value="<?=$targetFile?>"></p><div id="msg3" style="color:lime; position:absolute; top: 200px; left: 135px"></div>



<p><input name="foto4" id="foto4" type="file" /><input type=hidden name=imagem1 value="<?=$targetFile?>"></p><div id="msg4" style="color:lime; position:absolute; top: 240px; left: 135px"></div>



<p><input name="foto5" id="foto5" type="file" /><input type=hidden name=imagem1 value="<?=$targetFile?>"></p><div id="msg5" style="color:lime; position:absolute; top: 280px; left: 135px"></div>



<p><input name="foto6" id="foto6" type="file" /><input type=hidden name=imagem1 value="<?=$targetFile?>"></p><div id="msg6" style="color:lime; position:absolute; top: 320px; left: 135px"></div>



<br /><Br />

<p><input type="submit" value="Cadastrar"> </p>

</form>
</body>
</html>

 

 

codigo responsavel por enviar as fotos pro servidor:

<?php

// JQuery File Upload Plugin v1.5.0 by RonnieSan - (C)2009 Ronnie Garcia
if (!empty($_FILES)) {

require '../conn.php';


$d=mysql_query("select id_evento+1 from eventos order by id_evento desc limit 1");
list($last_id)=mysql_fetch_row($d);


$chave = rand(0,9999);
$foto_name =  $last_id.".jpg";

$uploaddir = $chave.$foto_name;  

$tempFile = $_FILES['Filedata']['tmp_name'];
$targetPath = $_SERVER['DOCUMENT_ROOT'] . $_GET['folder'] . '/';
$targetFile =  str_replace('//','/',$targetPath) .$uploaddir;

// Uncomment the following line if you want to make the directory if it doesn't exist
// mkdir(str_replace('//','/',$targetPath), 0755, true);


move_uploaded_file($tempFile,$targetFile);





}
echo '1'; // Important so upload will work on OSX
?>

 

 

codigo responsavel pro cadastrar as fotos no banco de dados:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>

<body>

<?php

require '../conn.php';

 $foto = $_POST['foto1'];
 $foto2 = $_POST['foto2'];
 $foto3 = $_POST['foto3'];
 $foto4 = $_POST['foto4'];
 $foto5 = $_POST['foto5'];
 $foto6 = $_POST['foto6'];

$sql= "insert into eventos (foto, foto2, foto3, foto4, foto5, foto6) values ('$foto','$foto2', '$foto3', '$foto4', '$foto5', '$foto6')";

echo $sql;


$result = mysql_query($sql, $connection) or die (mysql_error());


?>
</body>
</html>

 

desculpa estar dando topic up, mas eh p ta como resolvido, mas eu tenho essa outra duvida, mas como ta como resolvido ninguem vai olhar pois vao pensar que ta resolvido, mas se eu der up vao notar que tem alguma coisa

Compartilhar este post


Link para o post
Compartilhar em outros sites
  $foto = $_FILES['foto1']['name'];
 $foto2 = $_FILES['foto2']['name'];
 $foto3 = $_FILES['foto3']['name'];
 $foto4 = $_FILES['foto4']['name'];
 $foto5 = $_FILES['foto5']['name'];
 $foto6 = $_FILES['foto6']['name'];

Compartilhar este post


Link para o post
Compartilhar em outros sites

é a key do array q contém o nome real do arquivo.

Compartilhar este post


Link para o post
Compartilhar em outros sites

mas tem um pequeno problema, nao sei se você viu ocodigo inteiro, tem um processo em que renomeia o arquivo, pois por exemplo, eu hospedo o arquivo test.jpg, e você vai la e hospeda o mesmo arquivo, ele vai sobreescrever, entao por isso tem esse processo que gera um numero aleatorio entre 0 e 999 e concatena com o ultimo id da foto, por isso acredito que se fizer com $_FILES nao vai dar certo, pois vai pegar o nome antigo, oque posso fazer quanto a isso ?

Compartilhar este post


Link para o post
Compartilhar em outros sites

então ou você insere no banco no mesmo script do upload, ou você salva em uma session, e depois grava essa session no outro script.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Entao Bruno, eu fiz assim:

 

codigo responsavel por mandar a foto pro servidor:

<?php

// JQuery File Upload Plugin v1.5.0 by RonnieSan - (C)2009 Ronnie Garcia
if (!empty($_FILES)) {

require '../conn.php';


$d=mysql_query("select id_evento+1 from eventos order by id_evento desc limit 1");
list($last_id)=mysql_fetch_row($d);


$chave = rand(0,9999);
$foto_name =  $last_id.".jpg";

$uploaddir = $chave.$foto_name;  

$tempFile = $_FILES['Filedata']['tmp_name'];
$targetPath = $_SERVER['DOCUMENT_ROOT'] . $_GET['folder'] . '/';
$targetFile =  str_replace('//','/',$targetPath) .$uploaddir;

// Uncomment the following line if you want to make the directory if it doesn't exist
// mkdir(str_replace('//','/',$targetPath), 0755, true);


move_uploaded_file($tempFile,$targetFile);



$_SESSION['cont'] = $_SESSION['cont'] + 1;

$cont = $_SESSION['cont'];

if($cont=='1')
{
$_SESSION['foto'] = $targetFile;	
}


if($cont=='2')
{
$_SESSION['foto2'] = $targetFile;	
}


if($cont=='3')
{
$_SESSION['foto3'] = $targetFile;	
}


if($cont=='foto4')
{
$_SESSION['foto4'] = $targetFile;	
}


if($cont=='5')
{
$_SESSION['foto5'] = $targetFile;	
}


if($cont=='6')
{
$_SESSION['foto6'] = $targetFile;	
}


}
echo '1'; // Important so upload will work on OSX
?>

 

 

codigo responsavel por mandar o nome da foto pro banco de dados:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>

<body>

<?php

require '../conn.php';

 $foto = $_SESSION['foto'];
 $foto2 = $_SESSION['foto2'];
 $foto3 = $_SESSION['foto3'];
 $foto4 = $_SESSION['foto4'];
 $foto5 = $_SESSION['foto5'];
 $foto6 = $_SESSION['foto6'];

$sql= "insert into eventos (foto, foto2, foto3, foto4, foto5, foto6) values ('$foto','$foto2', '$foto3', '$foto4', '$foto5', '$foto6')";

echo $sql;


$result = mysql_query($sql, $connection) or die (mysql_error());


?>
</body>
</html>

 

 

Soh que nao dá certo, eu faco um echo do $sql e os values vem vazios, oque estou fazendo errado?como resolvo isso ?

 

nada ainda :(

 

Ninguém ?

 

up...

 

putz, ninguém pode me ajudar ?

Compartilhar este post


Link para o post
Compartilhar em outros sites

tá faltando um session_start()

 

 

apenas aguarde alguem responder. Se ninguém disse nada, ou ninguém que sabia viu, ou ninguém teve tempo de responder.(meu caso)

Compartilhar este post


Link para o post
Compartilhar em outros sites

Cara, esse seu código js tem muita redundância, eu faria algo assim

$("#foto1 #foto2 #foto3 #foto4 #foto5 #foto6").fileUpload({
     'uploader': 'uploader.swf',
     'cancelImg': 'cancel.png',
         'onComplete':function(){ 
                ft = $(this).attr('id');
                $('#msg6').html('<img src="homehost_ok.png" alt="ok" height="16" width="16" /> '+ft+' enviada com sucesso !'); 
         },
     'folder': 'upload',
     'script': 'upload.php',
     'fileDesc': 'Image Files',
     'fileExt': '*.jpg;*.jpeg;*.gif;*.png',
     'buttonText' : 'Importar',
     'auto': true,
     'scriptData' : {'variavel':$(this).attr('id')}
  });

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

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