0

Estoy tratando de enviar una serie de datos por jQuery/Ajax. Campos: radio, text,checkbox, textarea & imagenes para ser exacto 10.

Todo funcionan en excepcion de las imagenes al momento de enviar no las guarda en la base de datos ni en la carpeta seleccionada pero si la envia.

Realice un script que envia pero con un change asi no se enviaria los datos completo sino por fragmentos.

Codigo JS:

        $(function () {
            $('#formudata').on('submit', function (e) {
                e.preventDefault();

                var data = new FormData();

                
                var other_data = $('form').serializeArray();
                $.each(other_data,function(key,input){
                    data.append(input.name,input.value);
                });

                jQuery.ajax({
                    url: 'procces.php',
                    data: data,
                    contentType: false,
                    processData: false,
                    type: 'POST',
                    success: function () {
                        console.log('form was submitted');
                    }
                });
            });
        });

Es para enviar todo los campos menos las imagenes (no las envia no se la razon)

El otro codigo que uso para el envio de las imagenes:

$(document).ready(function () {
        $('.uploadimg').on('change',function () {
            console.log("test");
            var file_data = $(this).prop('files')[0];
            var form_data = new FormData();
            var ext = $(this).val().split('.').pop().toLowerCase();

            if ($.inArray(ext, ['png', 'jpg', 'jpeg', 'eps', 'pdf', 'tiff', 'psd']) == -1) {
                alert("Only png, jpg, jpeg, eps, pdf, tiff, psd images allowed");
                return;
            }

            var picsize = (file_data.size);
            console.log(picsize);
            
            if (picsize > 2971520000) {
                console.log("Image allowd less than 290 mb");
                return;
            }
            form_data.append('file', file_data);
            $.ajax({
                url: 'procces.php',
                dataType: 'text',
                cache: false,
                contentType: false,
                processData: false,
                data: form_data,
                type: 'POST',
                success: function (res) {
                    console.log(res);
                }
            });
        });
    })

HTML:

<form enctype="multipart/form-data" method="post" id="formudata">

<input type="file" name="image" accept="image/*" class="custom-file-input uploadimg" id="inputGroupFile">

Archivo procces.php:

$valid_extensions = array('jpeg', 'jpg', 'png','eps','pdf');

if (0 < $_FILES['file']['error']) {
    echo 'Error: ' . $_FILES['file']['error'] . '<br>';
} else {
    $code = mt_rand(10,100000);
    $size = $_FILES['file']['size'];
    $ext = strtolower(pathinfo($_FILES['file']['name'], PATHINFO_EXTENSION));

    if ($size > 2097152000) {
        echo json_encode(array("statusCode" => 400, 'msg' => "Image allowd less than 2mb"));
    } elseif (!in_array($ext, $valid_extensions)) {
        echo json_encode(array("statusCode" => 400, 'msg' => $ext. 'not allowed'));
    } else {
        $result = move_uploaded_file($_FILES['file']['tmp_name'], 'uploads/' . $code . '.' .$ext);
        echo json_encode(array("statusCode" => 200, 'code' => $code));

        $img = $_FILES['file']['tmp_name'].$ext;

        $insert2 = $db->query("INSERT INTO images (id_propuestas, id_customers, file_name) VALUES ('0002', '002', '".$img."')");

    }
}

1 respuesta 1

1

puedes usar e.currentTarget en FormData, para tomar todos los datos que están dentro de #formudata

        $(function () {
        $('#formudata').on('submit', function (e) {
            e.preventDefault();

            var data = new FormData(e.currentTarget);

            jQuery.ajax({
                url: 'procces.php',
                data: data,
                contentType: false,
                processData: false,
                type: 'POST',
                success: function () {
                    console.log('form was submitted');
                }
            });
        });
    });

y en procces.php tiene unos errores que puedes corregir

  1. $_FILE debe hacer referencia al atributo name del input, en tu caso image

<input type="file" name="image" accept="image/*" class="custom-file-input uploadimg" id="inputGroupFile">

  1. $img debe almacenar el nombre del archivo, no tmp_name, que es la dirección temporal que le da PHP

y al final tu código debe quedar así:

<?php
$valid_extensions = array('jpeg', 'jpg', 'png','eps','pdf');

if (0 < $_FILES['image']['error']) {
    echo 'Error: ' . $_FILES['image']['error'] . '<br>';
} else {
    $code = mt_rand(10,100000);
    $size = $_FILES['image']['size'];
    $ext = strtolower(pathinfo($_FILES['image']['name'], PATHINFO_EXTENSION));

    if ($size > 2097152000) {
        echo json_encode(array("statusCode" => 400, 'msg' => "Image allowd less than 2mb"));
    } elseif (!in_array($ext, $valid_extensions)) {
        echo json_encode(array("statusCode" => 400, 'msg' => $ext. 'not allowed'));
    } else {
        $img= $code . '.' .$ext;
        $result = move_uploaded_file($_FILES['image']['tmp_name'], 'uploads/' .$img);

        echo json_encode(array("statusCode" => 200, 'code' => $code));

        $insert2 = $db->query("INSERT INTO images (id_propuestas, id_customers, file_name) VALUES ('0002', '002', '".$img."')");

    }
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.