Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Seguinte Pessoal.
Tenho uma pagina onde eu cadastro um produto com imagem, mas inventei de criar um campo
para adicionar mais imagens se necessario.
Ai esta o meu problema.
Nao tenho ideia de como informar ao php que tem mais de uma imagem, e como pegar o valor das imagem para colocar no
banco mysql.
Vo tentar me explicar melhor:
eu vou cadastrar um produto ai eu tenho 3 fotos para adicionar.
eu adiciono uma, clico no botão para criar mais uma campo para adicionar foto etc.
ai eu adiciono as 3 fotos.
mas como informar ao php que são tres fotos ou + ?
a minha dificuldade esta pq eu criei um botão para adicionar mais campos para adicionar foto.
segue a baixo o meu codigo html.
<html>
<head>
<script type="text/javascript">
var mainDivName = 'eventDates';
function addEvent()
{
var ni = document.getElementById(mainDivName);
var numi = document.getElementById('theValue');
var num = (document.getElementById("theValue").value -1)+ 2;
numi.value = num;
var divIdName = "eventDate"+num+"Div";
var newdiv = document.createElement('div');
newdiv.setAttribute("id",divIdName);
newdiv.innerHTML = "<table><tr><td></td><td width=80><input type=\"file\" name=\"q1\" size=\"7\"></td></tr></table><a href=\"#\" onclick=\"removeEvent(\'"+divIdName+"\')\">Remover linha</a>";
ni.appendChild(newdiv);
}
function removeEvent(divNum)
{
var d = document.getElementById(mainDivName);
var olddiv = document.getElementById(divNum);
d.removeChild(olddiv);
}
</script>
</head>
<body>
<div id="table"><font color="#FFCC33"><b>
<form action="upload.php" method="post" enctype="multipart/form-data" method="post" enctype="multipart/form-data" >
<script language="JavaScript">
function textCounter(campo, countcampo, maxlimit){
if (campo.value.length > maxlimit) {
campo.value = campo.value.substring(0, maxlimit); }
else { countcampo.value = maxlimit - campo.value.length;}
}
</script>
<table cellpadding="0" cellspacing="0">
<tr>
<td height="40"></td>
<td align="left" ><font size="5">Cadastro de casas </font></td>
</tr>
<tr>
<td height="40" ></td>
</tr>
<tr>
<td height="24" align="center" >Tipo:</td>
<td>
<input name="produto" type="text" size="40" maxlength="50" />
</td>
</tr>
<tr>
<td height="20" ></td>
</tr>
<tr>
<td height="24" align="center" >Descrição:</td>
<td>
<textarea name="descri" cols="30" rows="4" wrap="virtual" onKeyDown="textCounter(this.form.descri,this.form.contador,100);" onKeyUp="textCounter(this.form.descri,this.form.contador,100);"></textarea>
<input name="contador" type="text" disabled="disabled" value="100" id="contador" size="3" maxlength="3">
</td>
</tr>
<tr>
<td height="20" ></td>
</tr>
<tr>
<td height="24" align="center" >Valor:</td>
<td>Reais.<input name="valorr" type="text" size="2" maxlength="3" />,<input name="valorc" type="text" size="2" maxlength="2" />Centavos
</td>
</tr>
<tr>
<td height="20" ></td>
</tr>
<tr>
<td>
<input type="hidden" value="0" id="theValue" />
<p><a onClick="addEvent();"><input type="button" name="fotos" value="Adicionar Foto" ></a></p>
<div id="eventDates"> </div></form>
</table>
</font></b>
</div>
<div id="table2">
<table>
<tr>
<td height="20" ></td>
</tr>
<tr>
<td align="right" ><label for="Submit"></label>
<input type="submit" name="upload" value="Cadastrar" />
</td>
</tr>
</table>
</div>
</body>
</html>
Toda ajuda é bem vinda
o meu codigo fico meio mau no post anterios..
eu nao consegui editalo.
então segue em baixo o codigo
<html>
<head>
<script type="text/javascript">
var mainDivName = 'eventDates';
function addEvent()
{
var ni = document.getElementById(mainDivName);
var numi = document.getElementById('theValue');
var num = (document.getElementById("theValue").value -1)+ 2;
numi.value = num;
var divIdName = "eventDate"+num+"Div";
var newdiv = document.createElement('div');
newdiv.setAttribute("id",divIdName);
newdiv.innerHTML = "<table><tr><td></td><td width=80><input type=\"file\" name=\"q1\" size=\"7\"></td></tr></table><a href=\"#\" onclick=\"removeEvent(\'"+divIdName+"\')\">Remover linha</a>";
ni.appendChild(newdiv);
}
function removeEvent(divNum)
{
var d = document.getElementById(mainDivName);
var olddiv = document.getElementById(divNum);
d.removeChild(olddiv);
}
</script>
</head>
<body>
<div id="table"><font color="#FFCC33"><b>
<form action="upload.php" method="post" enctype="multipart/form-data" method="post" enctype="multipart/form-data" >
<script language="JavaScript">
function textCounter(campo, countcampo, maxlimit){
if (campo.value.length > maxlimit) {
campo.value = campo.value.substring(0, maxlimit); }
else { countcampo.value = maxlimit - campo.value.length;}
}
</script>
<table cellpadding="0" cellspacing="0">
<tr>
<td height="40"></td>
<td align="left" ><font size="5">Cadastro de casas </font></td>
</tr>
<tr>
<td height="40" ></td>
</tr>
<tr>
<td height="24" align="center" >Tipo:</td>
<td>
<input name="produto" type="text" size="40" maxlength="50" />
</td>
</tr>
<tr>
<td height="20" ></td>
</tr>
<tr>
<td height="24" align="center" >Descrição:</td>
<td>
<textarea name="descri" cols="30" rows="4" wrap="virtual" onKeyDown="textCounter(this.form.descri,this.form.contador,100);" onKeyUp="textCounter(this.form.descri,this.form.contador,100);"></textarea>
<input name="contador" type="text" disabled="disabled" value="100" id="contador" size="3" maxlength="3">
</td>
</tr>
<tr>
<td height="20" ></td>
</tr>
<tr>
<td height="24" align="center" >Valor:</td>
<td>Reais.<input name="valorr" type="text" size="2" maxlength="3" />,<input name="valorc" type="text" size="2" maxlength="2" />Centavos
</td>
</tr>
<tr>
<td height="20" ></td>
</tr>
<tr>
<td>
<input type="hidden" value="0" id="theValue" />
<p><a onClick="addEvent();"><input type="button" name="fotos" value="Adicionar Foto" ></a></p>
<div id="eventDates"> </div></form>
</td>
</tr>
</table>
</font></b>
</div>
<div id="table2">
<table>
<tr>
<td height="20" ></td>
</tr>
<tr>
<td align="right" ><label for="Submit"></label>
<input type="submit" name="upload" value="Cadastrar" />
</td>
</tr>
</table>
</div>
</body>
</html>A minha ideia é essa mas eu nao sei como enviar ao banco entendeu ?
pq a quantidade de fotos pode variar..
Enviar ao banco?
Você não vai enviar a foto, mas sim a URL da foto upada.
>
Enviar ao banco?
Você não vai enviar a foto, mas sim a URL da foto upada.
sim sim...
vou enviar a url.
mas antes de enviar ela vai passar por uma verificação entendeu.
tipo selecionei as 3 fotos e cliquei em enviar.
ao clicar em enviar os dados do formulario e a url da foto vão passar por uma verificação e ai depois sera enviada para o banco.
nesse arquivo que faz a verificação do formulario e da url da foto, eu nao sei como dizer a quantidade de url será exibida no banco..
tipo
geralmente se pega os dados de um formulario por POST.
entao no arquivo de verificação terá assim..
$tipo=$_POST['produto'];
$descri=$_POST['descri'];
$valord=$_POST['valorr'];
$img=$_POST['img'];
neste caso o POST sabe que vai receber um dado na IMG.
mas no meu caso eu nao vou saber exatamente a quantidade de URL será exibida no banco..
Obrigado pela ajuda Guilherme...
Ah, acho que entendi. :grin:
Então, pra isso você deve fazer um foreach. Na lógica, para cada resultado recebido, você fará um loop que executará a inserção no banco.
Era isso?
\o/ isso \o/
como eu consigo fazer isso ???
^o)
Sem JavaScript/AJAX, você terá de utilizar múltiplos inputs. Mas utilize um name para eles envolvendo um array, assim, você não vai se incomodar. Veja:
<form action="proccess.php" method="POST" enctype="multipart/form-data">
<input name="files[]" type="file" /><br />
<input name="files[]" type="file" /><br />
<input type="submit" value="Enviar" />
</form>
Aí, no PHP, fiz o seguinte:
print_r($_FILES);
E veja a minha saída:
Array
(
[imagem] => Array
(
[name] => Array
(
[0] => 03.png
[1] => 01.png
)
[type] => Array
(
[0] => image/png
[1] => image/png
)
[tmp_name] => Array
(
[0] => C:\xampp\tmp\phpCBB5.tmp
[1] => C:\xampp\tmp\phpCBB6.tmp
)
[error] => Array
(
[0] => 0
[1] => 0
)
[size] => Array
(
[0] => 164003
[1] => 317127
)
)
)
Entendeu? ele vai adicionar seus arquivos em um array, e a partir daqui você pode trabalhar com múltiplas imagens.
Na lógica: você verifica quantos elementos o array possui com um count. Se for maior que zero, você não irá fazer o loop com o foreach. Senão, faça o loop.
Para aplicar múltiplos inputs de envio de arquivos, ou você adiciona uma quantia pré-definida; ou adiciona um botão de "Adicionar mais arquivos" que, quando clicado, vai inserir um input; ou, ainda, faz um input com multiupload usando o AJAX (exemplo).
Sem JavaScript/AJAX, você terá de utilizar múltiplos inputs. Mas utilize um name para eles envolvendo um array, assim, você não vai se incomodar. Veja:
<form action="proccess.php" method="POST" enctype="multipart/form-data">
<input name="files[]" type="file" /><br />
<input name="files[]" type="file" /><br />
<input type="submit" value="Enviar" />
</form>
Aí, no PHP, fiz o seguinte:
print_r($_FILES);
E veja a minha saída:
Array
(
[imagem] => Array
(
[name] => Array
(
[0] => 03.png
[1] => 01.png
)
[type] => Array
(
[0] => image/png
[1] => image/png
)
[tmp_name] => Array
(
[0] => C:\xampp\tmp\phpCBB5.tmp
[1] => C:\xampp\tmp\phpCBB6.tmp
)
[error] => Array
(
[0] => 0
[1] => 0
)
[size] => Array
(
[0] => 164003
[1] => 317127
)
)
)
Entendeu? ele vai adicionar seus arquivos em um array, e a partir daqui você pode trabalhar com múltiplas imagens.
Na lógica: você verifica quantos elementos o array possui com um count. Se for maior que zero, você não irá fazer o loop com o foreach. Senão, faça o loop.
Para aplicar múltiplos inputs de envio de arquivos, ou você adiciona uma quantia pré-definida; ou adiciona um botão de "Adicionar mais arquivos" que, quando clicado, vai inserir um input; ou, ainda, faz um input com multiupload usando o AJAX (exemplo).
Para, falar a verdade nao entendi muito bem...
<html>
<head>
<script type="text/javascript">
var mainDivName = 'eventDates';
function addEvent()
{
var ni = document.getElementById(mainDivName);
var numi = document.getElementById('theValue');
var num = (document.getElementById("theValue").value -1)+ 2;
numi.value = num;
var divIdName = "eventDate"+num+"Div";
var newdiv = document.createElement('div');
newdiv.setAttribute("id",divIdName);
newdiv.innerHTML = "<table><tr><td></td><td width=80><input type=\"file\" name=\"q1\" size=\"7\"></td></tr></table><a href=\"#\" onclick=\"removeEvent(\'"+divIdName+"\')\">Remover linha</a>";
ni.appendChild(newdiv);
}
function removeEvent(divNum)
{
var d = document.getElementById(mainDivName);
var olddiv = document.getElementById(divNum);
d.removeChild(olddiv);
}
</script>
</head>
<body>
<div id="table"><font color="#FFCC33"><b>
<form action="upload.php" method="post" enctype="multipart/form-data" method="post" enctype="multipart/form-data" >
<input type="hidden" value="0" id="theValue" />
<p><a onClick="addEvent();"><input type="button" name="files[]" value="Adicionar Foto" ></a></p>
<div id="eventDates"> </div></form>
</font></b>
</div>
<div id="table2">
<table>
<tr>
<td height="20" ></td>
</tr>
<tr>
<td align="right" ><label for="Submit"></label>
<input type="submit" name="upload" value="Cadastrar" />
</td>
</tr>
</table>
</div>
</body>
</html>
acredito que estou usando multiplos imputs.
ainda não entendo como pegar os valores para verificação..
=/
Obrigado Guilherme
hum..
fiz o que tu falo, mas
esta me retornando assim
Array ( [q1] => Array ( [name] => 100_2221.JPG [type] => image/jpeg [tmp_name] => C:\xampp\tmp\php2B56.tmp [error] => 0 => 2569183 ) )
só não consigo entender como vou inserir no banco esses dados.
Consegui ver o porque estava aparecendo o ERRO no retorno..
bom agora esta me retornando o seguinte
Array ( [file] => Array ( [name] => Array ( [0] => 100_2224.JPG [1] => 100_2226.JPG ) [type] => Array ( [0] => image/jpeg [1] => image/jpeg ) [tmp_name] => Array ( [0] => C:\xampp\tmp\phpE417.tmp [1] => C:\xampp\tmp\phpE438.tmp ) [error] => Array ( [0] => 0 [1] => 0 ) => Array ( [0] => 2407968 [1] => 2448831 ) ) )
Seria esse o retorno certo ??
pq parece que ta faltando informação.
bom se for...
como eu consigo enviar esse array com quantidade variada para dentro do meu mysql ??
Crie uma tabela exclusiva e específica para as fotos.
Digamos que você tenha um campo
idlá na tabela de produtos, então adicione este mesmo campo na tabela fotos, e sempre que for adicionar uma foto, indique o id referente ao produto na hora de inserir.Então, a foto irá ser referenciada ao produto. Depois, é só resgatar as fotos com os ids relacionados aos produtos via SELECT e mandar bala. :thumbsup:
------------------
Programaticamente falando:
CREATE TABLE
produtos(idint(11) AUTO_INCREMENT NOT NULL,nomevarchar(64) NOT NULL,valorint(6) NOT NULL,PRIMARY KEY(
id)idint(11) NOT NULL,urlvarchar(128) NOT NULL,PRIMARY KEY(
id));
Ou seja, sempre que for adicionar uma foto, indique o ID referente ao produto que ela pertencerá.
Depois é só dar um JOIN e trazer os resultados.