Jump to content
Jazara

Enviando com $.ajax um anexo

Recommended Posts

Não consegui achar um método ou explicação para como faço para enviar um arquivo a ser anexado no formulário de contato mantendo a função $.post do Jquery.

 

O que tenho para envio do form é isso:

var dados = $( this ).serialize();
			
			$("#AlertaCampos").html("<img src='"+URLbase+"/imagem/carregando.gif' width='50'>");
 
			$.ajax({
				type: "POST",
				url: ""+URLbase+"/formulariosI/soliciteI/email.php",
				data: dados,
				success: function( data )
				{
					$("#AlertaCampos").html(data);
					$("#AlertaCamposA").css({border: "1px  #D7DF21 solid",background: "none"});
					}
			});
			
			return false;
		});

Porém quando adicionei o campo de anexar arquivo mesmo setando o formulário para envio não funcionou... alguém tem uma ideia?

Share this post


Link to post
Share on other sites

Acredito que por motivos de segurança o javascript não permita o envio de arquivos, mas você por fazer alguma coisa utilizando um <iframe> escondido na página

Share this post


Link to post
Share on other sites

Cara, hoje em dia é possível utilizando a api FormData

 

https://developer.mozilla.org/en-US/docs/Web/API/FormData

  • +1 1

Share this post


Link to post
Share on other sites

Cara, hoje em dia é possível utilizando a api FormData

 

https://developer.mozilla.org/en-US/docs/Web/API/FormData

 

Fala pessoal e Bruno, não tenho muita experiencia ainda com Jquery e Ajax por isso vou tentando me entender com o sistema. Veja como ficou agora, porém surgiu outro problema...

 

 

var options = {  
                beforeSend: function() {  
/*informações*/
$("#AlertaCampos").html("<img src='"+URLbase+"/imagem/carregando.gif' width='50'>");
/*VERIFICA OS CAMPOS*/
var Li =0;
var somar_erro = 0;

$.each(nome_campos, function() { 
var Nc = nome_campos[Li]; var Nc2 = "#"+Nc;
var valor_atual = $(Nc2).val();  
var valor_padrao = $(Nc2).prop('defaultValue');  
if( valor_atual ==  valor_padrao){campo_vazio(Nc); somar_erro++;}else{campos_ok(Nc);}
Li++;
});
if(somar_erro != 0){
	$("#AlertaCampos").html("Existem "+somar_erro+" campo(s) obrigatórios, por favor verifique!"); 
	$("#enviar").val("Re-enviar"); 
	$("#AlertaCamposA").css({border: "1px  #D7DF21 solid",background: "#FFD7D7"});
	return false;
	
	}else{$("#enviar").val("Enviar");}
/*VERIFICA OS CAMPOS*/
				/*informações*/

                     alert("Antes de mandar!");  
                },
                uploadProgress: function(event, position, total, percentComplete) {                      
                     $("#status").html("Percentual completado: " + percentComplete + "%");  
                }, 
                success: function() {  
                     alert("Upload concluido!");  
                },  
                error: function() {  
                     alert("Falha ao fazer upload de arquivo.");  
                },
				target: "#AlertaCampos"
           }; 

 
 $('#form_contato').ajaxForm(options); 

Agora quando estão os campos vazios, não estou conseguindo parar a execução e o envio...

 

Vocês podem me ajudar?

Consegui... ufa... vejam como ficou

 

 

$("#form_contato").submit(function(){
/*informações*/
M_url= ""+URLbase+"/formulariosI/soliciteI/email.php";
$("#AlertaCampos").html("<img src='"+URLbase+"/imagem/carregando.gif' width='50'>");

/*VERIFICA OS CAMPOS*/
var Li =0;
var somar_erro = 0;

$.each(nome_campos, function() { 
var Nc = nome_campos[Li]; var Nc2 = "#"+Nc;
var valor_atual = $(Nc2).val();  
var valor_padrao = $(Nc2).prop('defaultValue');  
if( valor_atual ==  valor_padrao){campo_vazio(Nc); somar_erro++;}else{campos_ok(Nc);}
Li++;
});
if(somar_erro != 0){
	$("#AlertaCampos").html("Existem "+somar_erro+" campo(s) obrigatórios, por favor verifique!"); 
	$("#enviar").val("Re-enviar"); 
	$("#AlertaCamposA").css({border: "1px  #D7DF21 solid",background: "#FFD7D7"});
	return false;
	}else{$("#enviar").val("Enviar");}
/*VERIFICA OS CAMPOS*/


/* SE ESTIVER OK EXECUTE O ENVIO */
var fd = new FormData(document.getElementById("form_contato"));

$.ajax({
  url: M_url,
  type: "POST",
  data: fd,
  processData: false,  // tell jQuery not to process the data
  contentType: false,   // tell jQuery not to set contentType
  success: function(data){
	$("#AlertaCampos").html(data);
	$("#AlertaCamposA").css({border: "1px  #D7DF21 solid",background: "none"});
}
});

return false;
/* SE ESTIVER OK EXECUTE O ENVIO */

});

Agora só por curiosidade, teria como eu pegar o progresso do envio do arquivo?

Share this post


Link to post
Share on other sites

DICA:

 

a API FormData não funciona nas versões mais antigas do IE, se pra você não tem problema quanto a isso, blz!

 

eu recomendo o plugin ajaxForm que além de fazer o upload de arquivos e ser compativél com verções mais antigas do IE (testei no IE 8) tem opção de progress.

  • +1 1

Share this post


Link to post
Share on other sites

DICA:

 

a API FormData não funciona nas versões mais antigas do IE, se pra você não tem problema quanto a isso, beleza!

 

eu recomendo o plugin ajaxForm que além de fazer o upload de arquivos e ser compativél com verções mais antigas do IE (testei no IE 8) tem opção de progress.

 

Não vejo problema para navegadores antigos, porém vou estudar para ver o efeito de upload com progresso curti, obrigado

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.