Upload de Foto via jquery/ajax

[wdc_black_ 0]

eai galera, to com 1 script de inserção no banco em ajax, está funcionando certinho,

mas quando tento colocar um campo de foto, ele n faz upload da foto...

coloquei 1 echo $foto no arquivo que executa o php e não retornou nada, parece que nãp está enviando a informação de formulario para a pagina...

 

index

<form enctype='multipart/form-data'>
   <label>Nome</label><br/>
   <input type="text" name="nome" size="31" maxlength="30" /><br />
   <label>Telefone</label><br/>
   <input type="text" name="telefone" size="31" maxlength="11" /><br/>
   <label>E-mail</label><br/>
   <input type="text" name="email" size="31" maxlength="100" /><br/>
   <label>Foto</label><br/>
   <input type="file" name="foto" /><br/>
 <button type="submit">Cadastrar</button>
</form>

 

jquery

$(document).ready(function(){
   $('form').bind('submit', function(){
       var params = $(this.elements).serialize();
       $.ajax({
           type: 'POST',
    url: "enviar.php",
           data: params,
           beforeSend: function(){
	$('#loading').show(),
               $('#loading').html("Carregando...");
           },
           success: function(txt){
	$('#loading').hide(),
               $('#conteudo').prepend(txt);				
           }
       })
       return false;
   });
});

 

estou recebendo ela no enviar.php assim

$arquivo = isset($_FILES["foto"]) ? $_FILES["foto"] : FALSE;

 

alguem sabe pq n esta enviando a informação do campo foto???

 

obrigado

[William Bruno 1501]

pq ajax não envia arquivos.

 

você pode fazer isso, mas com flash ou um iframe escondido. Apenas com javascript puro não da para fazer de forma simples e crossbrowser. (por questões de segurança).

[wdc_black_ 0]

hummm, que droga :(

seria muito dificil fazer com iframe escondido??

[William Bruno 1501]

não:

 

<iframe id="ihide" name="ihide" style="display: none;"></iframe>

[wdc_black_ 0]

humm, mas como eu poderia implementar isso?

aonde ficaria o campo file??

os codigos php ficariam no mesmo arquivo enviar.php??

[William Bruno 1501]

humm, mas como eu poderia implementar isso?

comece a fazer.

o inicio ta ai, esse html.

aonde ficaria o campo file??

no formulario.

 

os codigos php ficariam no mesmo arquivo enviar.php??

sim, talvez..

 

 

o procedimento é:

o formulario será enviado para o iframe, com o atributo target.

não acontecerá o refresh da tela, pq o iframe vai trabalhar independente do resto.

 

faça o iframe te retornar uma instrução que lhe dirá oq aconteceu no servidor. Pronto, é isso.

[wdc_black_ 0]

humm, acho que estou entendendo,

seria algo assim ??

 

<form enctype='multipart/form-data' target='ihide'>

   <label>Nome</label><br/>
   <input type="text" name="nome" size="31" maxlength="30" /><br />
   <label>Telefone</label><br/>
   <input type="text" name="telefone" size="31" maxlength="11" /><br/>
   <label>E-mail</label><br/>
   <input type="text" name="email" size="31" maxlength="100" /><br/>
   <label>Foto</label><br/>
   <input type="file" name="foto" /><br/>
 <button type="submit">Cadastrar</button>
</form>

<iframe id="ihide" name="ihide" frameborder="0" src="enviar.php" style="display: none;">

</iframe>

 

agora como faço pra passar para o ajax só os campos e para o iframe só o file??

[William Bruno 1501]

no evento onsubmit do teu formulario, dispare a tua function, que vai fazer a requisição.

 

vai ir 'tudo' para o iframe, mas você conseguirá 'desviar' os campos para o ajax.

[wdc_black_ 0]

willian...

 

dei uma pesquisa e encontrei isso aqui

<form method="post" enctype="multipart/form-data" action="controlUpload.php" target="iframeUpload">
   Arquivo: <input name="fileUpload" type="file" />
   <input onchange="javascript: submit()" value="enviar">
   <iframe name="iframeUpload" style="display:none"></iframe>
</form> 

 

apartir disso como eu faço para separar os parametros para o ajax?

------------------------------------------------------------------------

tava dando uma pesquisada aqui, é possivel eu utilizar em conjunto com esse meu script o

jqUploader

 

obrigado

[William Bruno 1501]

willian...

 

apartir disso como eu faço para separar os parametros para o ajax?

 

assim:

http://forum.imasters.com.br/topic/393224-fazer-tudo-na-div-idconteudo/

[wdc_black_ 0]

dei uma lida ali mas acho que nao me ajuda pq meu script é só em jquery

e o dele é puro ajax...

[William Bruno 1501]

jQuery é javascript.

 

se quer usar jQuery para fazer o ajax, veja sobre o metodo .serialize(), e a função $.ajax()

[wdc_black_ 0]

eu sei wilian, mas pelo jeito entao tu nem olhou meu codigo, ali da pra ver que eu uso o jquery com metodo de ajax para a requição,

no caso preciso da integração do jquery/ajax com o iframe...

[William Bruno 1501]

oi @wdc_black_, eu tinha olhado mas já tinha me esquecido.

 

é isso cara, qual é a dúvida agora ?

enviar com iframe, já te mostrei como é.

enviar o form com ajax você sabe fazer.

 

oque falta ?

para 'integrar', basta usar os 2 juntos. Faça os testes ai.

[wdc_black_ 0]

hehehe ;)

assim wilian,

 

eu tenho meu form, que no click do submit dele faz o requisicao do ajax, ai pega os valores de todos os campos do form e manda pra funcao.php , ta ok, isso funciona.

 

agora como faço para redirecionar o file para o iframe, e como faça para executar a funcao do upload??

isso que eu n to entendendo :/

[William Bruno 1501]

use o atributo target da tag form

[wdc_black_ 0]

hum... ai dentro do iframe estará o php que faz o upload do arquivo??

 

outra duvida, qual script sera executado primeiro, o do ajax ou o do iframe???

[William Bruno 1501]

acredito que executarão em paralelo, mas o do ajax será chamado primeiro.

[wdc_black_ 0]

humm entendo... pq no caso, quando executar o ajax ele criara 1 registro com id unico no banco...

ai no iframe tenho que dar um update nesse registro apenas acrescentando o endereço da imagem que será upada...

mas mesmo assim ainda n entendo como fazer...

acho que vou acabar desistindo...

mas mesmo assim vlw wilian ;)

[William Bruno 1501]

não cara, é oq te disse no começo..

 

faça o iframe te dar um retorno.

use esse retorno para disparar oq você precisa gravar.

 

mais fácil assim. No caso então, só dispararia a tua requisição ajax, no callback do iframe.

 

=)

não desista, estude. Aprenda, tente.