Formulario com imagem em ajax

[joseRenato]

Olá

 

Estou tentando enviar um formulário via ajax

 

o problema é que tem um campo file no formulário, e não estou conseguindo passar a imagem via js pro arquivo php

 

segue o código js:

				$('#formCadastroProdutos').submit(function(e){					e.preventDefault();					    var imgProduct;						$('#imagemProduto').change(function (event) {							form = new FormData();							form.append('imagemProduto', event.target.files[0]);						});					$.ajax({							url: "cadastrarProduto.php",							type: "POST",							datype: "html",							data: {								imgProduct,								idEmpresa: $("#idEmpresa").val(),								nomeProduto: $("#nomeProduto").val(),								precoProduto: $("#precoProduto").val(),								descricaoProduto: $("#descricaoProduto").val(),							},							success: function(data){								alert(data);								nomeProduto: $("#nomeProduto").val("");								precoProduto: $("#precoProduto").val("");								descricaoProduto: $("#descricaoProduto").val("");							},							error: function(data){								alert(data);							}						});									});

retorna que os campos $FILES no cadastrarProduto.php sao indefinidos, ou seja, não esta passando a imagem pro php

[DiF]

@joseRenato

 

Os campos do tipo file.. por enquanto não é permitido enviar... por questões de segurança... mas sei que a w3c já está planejando contornar essa situação.

 

o que podes fazer é uma gambiarra utilizando um plugin..    http://abandon.ie/notebook/simple-file-uploads-using-jquery-ajax

 

também atente-se que o jquery não processa imagens... então na função $.ajax   tem de colocar:

processData: false, contentType: false, 

Bom.. nunca tentei fazer um upload via ajax.. já que não era permitido eu utilizava um plugin em flash.

[joseRenato]

caso eu use 

 

processData: false,
contentType: false,

 

da problema pra enviar os outros campos, o jeito seria fazer um ajax separado apenas pra enviar a imagem?

 

depois vou dar uma olhada nesse plugin

[DiF]

@joseRenato

 

Não, por que como já disse.. .atualmente o jquery NÃO faz upload assíncrono.

você é obrigado a utilizar outra solução para contornar isso.. como já falei mais acima...  ou usar flash, ou utilizar um iframe...... OU utilizar algum plugin por exemplo  este: https://blueimp.github.io/jQuery-File-Upload/

[joseRenato]

Resolvi assim:

	$('#formCadastroProdutos').submit(function(e){		if($.browser.msie == true){                    //Para IE 9 e inferiores		    if(parseInt($.browser.version) <= 9){			 $("#formCadastroProdutos").attr("action", "cadastrarProdutoIe");		    }		}else{	           e.preventDefault();		   var formdata = new FormData($(this)[0]);																$.ajax({							url: "cadastrarProduto.php",							type: "POST",							datype: "html",							data: formdata,							async: false,							success: function(data){								alert(data);								LoadProducts();								$("#nomeProduto").val("");								$("#precoProduto").val("");								$("#descricaoProduto").val("");								$("#imagemProduto").val("");															},							cache: false,							contentType: false,							processData: false						});					 return false;					}							});

Usei o Formdata desta maneira, assim ele gera dois array um $_POST com os valor dos input de texto e um array $_FILE com as propriedades da imagem, ai é só chamar os valores normal e gravar no banco

 

como o formdata não funciona no IE, tive que fazer do modo convencional....

[DiF]

@joseRenato

 

ótima resolução. com certeza será de grande ajuda para muitos!

 

Deixa eu fazer uma observação que esqueci de fazer antes..

A função $.ajax()  utilizando a versão mais recente do jquery (2.1.4), o retorno de sucesso mudou. deixou de ser um atributo de opção(success), para ser uma função de retorno(done() ).

 

exemplo com o seu código mais acima:

    $.ajax({	url: "cadastrarProduto.php",	type: "POST",	datype: "html",	data: formdata,	async: false,        cache: false,	contentType: false,	processData: false    })    .done(function(data){	    alert(data);            LoadProducts();	    $("#nomeProduto").val("");	    $("#precoProduto").val("");            $("#descricaoProduto").val("");	    $("#imagemProduto").val("");								     })     .fail(function(data){          //retorno caso falhar.      });    return false;}

O bom desse modo é que as funções de retorno são funções encadeadas...pode chama-las uma atrás da outra!