Enviar arquivos e inputs com as mesma requisição Ajax

[LevelMax 0]

votar a favor

votar contrafavorita

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();

});

[Jorge Gomess 3]

Você deseja fazer um formulário para criar e atualizar informações no banco de dados via Ajax, correto?

[LevelMax 0]

Você deseja fazer um formulário para criar e atualizar informações no banco de dados via Ajax, correto?

SIM, é meio confuso mais é o seguinte:

Amigo, é o seguinte: Eu tenho essas 2 formas de enviar um formulário para uma página .php sem dar refresh. Porém uma maneira (citada no post acima) enviar os valores dos inputs e a segunda forma (também citada no post) enviar aquivos (uploads). Queria juntar essas 2 formulas em uma, pois to uma baita dificuldade. Traduzindo: Preciso fazer envio de upload e de valores de input em uma mesma forma. Creio que o problema é no data: pois não consigo pegar o valor dos inputs. Preciso mt de ajuda .

[Jorge Gomess 3]

Aqui mano, fiz este exemplo para você, ele envia imagens e textos juntos, e vão para a página process.php. Lembrando que você precisa tomar mais algumas medidas de segurança, validando dados no arquivo php.

html:

<form id="dataForm">
            <label for="name">Nome: </label>
            <input type="text" name="name" id="name"/>
            <br>
            <br>
            <label for="file">Arquivos: </label>
            <input type="file" name="files[]" id="file" multiple="multiple"/>
            <br>
            <br>
            <button type="submit" id="sendForm">Enviar</button>
</form>

javascript:

$(function () {
        $("#dataForm").on('submit', function (e) {
            e.preventDefault();
            e.stopPropagation();
            var button = $("#sendForm");
            var data = new FormData(this);
            $.ajax({
                beforeSend: function () {
                    button.attr('disabled', true);
                    button.html("Going...");
                },
                url: "process.php",
                type: 'POST',
                data: data,
                mimeType:"multipart/form-data",
                contentType: false,
                cache: false,
                processData:false,
                success: function (data) {
                    console.log(data);
                    button.attr('disabled', false);
                    button.html("Enviar");
                }
            });
        });
    });

[LevelMax 0]

Aqui mano, fiz este exemplo para você, ele envia imagens e textos juntos, e vão para a página process.php. Lembrando que você precisa tomar mais algumas medidas de segurança, validando dados no arquivo php.

html:

<form id="dataForm">
            <label for="name">Nome: </label>
            <input type="text" name="name" id="name"/>
            <br>
            <br>
            <label for="file">Arquivos: </label>
            <input type="file" name="files[]" id="file" multiple="multiple"/>
            <br>
            <br>
            <button type="submit" id="sendForm">Enviar</button>
</form>

javascript:

$(function () {
        $("#dataForm").on('submit', function (e) {
            e.preventDefault();
            e.stopPropagation();
            var button = $("#sendForm");
            var data = new FormData(this);
            $.ajax({
                beforeSend: function () {
                    button.attr('disabled', true);
                    button.html("Going...");
                },
                url: "process.php",
                type: 'POST',
                data: data,
                mimeType:"multipart/form-data",
                contentType: false,
                cache: false,
                processData:false,
                success: function (data) {
                    console.log(data);
                    button.attr('disabled', false);
                    button.html("Enviar");
                }
            });
        });
    });

Opa meu amigo, irei dar uma testada aqui. Fico muito grato. JS não é meu forte, manjo é do php rsrs. Irei estudar js, pois irei precisar muito haha.

Enfim... OBG pela ajuda, abraços.

[LevelMax 0]

Poxa colega, demorei um pouco pra testar, e infelizmente não teve resultado. Simplesmente a imagem não faz upload na pasta.

HTML

<form id="postMidHome" method="post" enctype="multipart/form-data" >
<input type="file" name="fotoPost" id="fotoPost"/>
<input type="text" name="textoTeste" />
<button  type="submit" style="float:right;" class="btnPostar" id="envPost"> <i class="fa fa-send" aria-hidden="true"></i> </button>
</form>

JQUERY

$(function () {
        $("#postMidHome").on('submit', function (e) {
            e.preventDefault();
            e.stopPropagation();
            var button = $("#envPost");
            var data = new FormData(this);
            $.ajax({
                beforeSend: function () {
                    button.attr('disabled', true);
	            button.html("<i class='fa fa-spinner fa-spin fa-1x fa-fw'></i>");
                },
                url: "form/post.php",
                type: 'POST',
                data: data,
                mimeType:"multipart/form-data",
                contentType: false,
                cache: false,
                processData:false,
                success: function (data) {
                 $("#postarHome").load('elements/contPost.php');
				 $("#postarHome").slideUp();
                 $('#postarHome').attr('style','');
                 $("#postarHome").slideDown();
                }
            });
        });
    });

PHP (sem medidas de segurança)

$texto = $_POST["textoTeste"];

if($_FILES['fotoPost']['error'] > 0) {
$PostSql = mysqli_query($conection,"INSERT INTO HueBR VALUE (NULL,"","$texto");
		
}else {

$rand = rand(1,1999999);
$img = $rand.$_FILES['image']['name'];
move_uploaded_file($_FILES['image']['tmp_name'],"../uploads/foto/".$img);
$PostSql = mysqli_query($conection,"INSERT INTO HueBR VALUE (NULL,"$img","$texto");
}

--------

Os textos que estavam nas imputs são gravados no banco de dados de boa... Já a imagem não funfa.

====================================================================

Edit: Já resolvi, era um erro que resolvi sem querer rsrs.