5

Eu tenho um código que funciona perfeitamente para envio de arquivos sem refresh usando PHP e jQuery e tenho um outro código que funciona sem refresh também mas para inserção dos dados no DB. Não consigo colocar os dois códigos juntos.

O que eu quero é basicamente enviar os dados e fazer o upload de um arquivo usando um mesmo form e uma única requisição. Acredito que o problema esteja no atributo "data:"

Código jQuery - Envia Inputs:

    $( "#create" ).on( "click", function() {
        formId   = $(this).closest( ".form" ).attr("id");
        formArray = $("#" + formId).serializeArray();
        $.ajax({
            type: 'POST', url: 'ajax.php',
            data: { type: 'create', formArray: formArray },
            success: function( msg ) {
                alert( msg );
                window.location.reload();
            },
            error: function() {
                alert('AJAX Error');
            }
        });
        event.preventDefault();
    });

Código jQuery - Upload de Arquivos:

    var form;
    $('#fileUpload').change(function (event) {
        form = new FormData();
        form.append('fileUpload', event.target.files[0]);
    });

    $( "#teste" ).on( "click", function() {
        $.ajax({
            type: 'POST', url: 'ajax.php',
            processData: false,
            contentType: false,
            data: form,
            success: function( msg ) {
                alert( msg );
            },
            error: function() {
                alert('AJAX Error');
            }
        });
        event.preventDefault();
    });
2
  • E qual o elemento que recebe o clic? #teste ou #create? Ou ambos e devem fazer o mesmo?
    – Sergio
    Commented 5/06/2014 às 17:14
  • Na verdade seria o #create só, o #teste foi criado só para fins de teste mesmo, eu queria juntar os dois.
    – tassiodias
    Commented 5/06/2014 às 17:34

1 Resposta 1

2

Pense nessa sua Aplicação como um modelo e veja qual faz mais sentido: Um usuário cadastrado sem nenhum arquivo enviado ou um arquivo enviado não associado à nenhum usuário registrado?

Se você conseguiu enxergar uma relação, pode compreender que faz bastante sentido que a rotina de upload ocorra no callback de sucesso do cadastro do usuário. ;)

Se o cadastro do usuário falhar, é uma falha geral e, dessa forma, você não vai ter arquivos órfãos. se o upload falhar, pelo menos o usuário já existe, com ID primário inclusive, o que pode permitir envio(s) futuro(s).

5
  • irei testar em breve, ainda são duas requisições mas faz sentido.
    – tassiodias
    Commented 5/06/2014 às 17:38
  • Funcionou perfeitamente, obrigado @Bruno Augusto
    – tassiodias
    Commented 5/06/2014 às 18:10
  • Que bom que pude ajudar :) Commented 5/06/2014 às 18:38
  • @BrunoAugusto Estou com o mesmo problema, a minha dúvida é como fazer a rotina de upload no callback de sucesso? Basta chamar a função de upload? Commented 16/07/2014 às 13:37
  • Isso depende da estrutura da sua aplicação, da sua metodologia de desenvolvimento e etc. Por exemplo, se você tiver uma pseudo-classe JavaScript que lide com todos os detalhes de uma tarefa de upload, então sim, bastaria você instanciar o objeto, passar alguns argumentos e disparar o pseudo-método de upload. Se você não tem algo do tipo, vai codificar a rotina inteira dentro do callback. De novo, de novo e de novo... Commented 16/07/2014 às 16:09

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .