1

Quiero enviar una imagen por el formulario de php con ajax, pero por alguna razón no me esta llegando el por POST el $_FILES[] pero si me llega el POST de public de la publicación y me la inserta en la base de datos de forma correcta, pero no me llega nada por el POST de la imagen.

Según los errores que muestra en la imagen que publico mas abajo, el error se debe a que en la logica de PHP que muestro al final de esta publicación, no esta llegando nada por el $_FILES[] pero quiero que sepan que si me llega el $_POST['public'] y lo guarda en la base de datos. Lo que no se si la logica del publication.js que es donde se encuentra la logica del JS para enviar el formulario a publication.php, no se si esta de forma correcta.

introducir la descripción de la imagen aquí

Formulario HTML5:

<form id="form" method="POST" class="col s12" enctype="multipart/form-data">
                            <div class="row">
                                <div class="input-field col s12">
                                <textarea id="post" name="post" class="materialize-textarea" required></textarea>
                                <label for="post">Dile algo al mundo...</label>
                                <span class="helper-text" data-error="wrong" data-success="right">

                                <div class="file-field input-field">
                                    <span class="file-path-wrapper">
                                        <i class="material-icons prefix">photo_camera</i>
                                        <input id="img" name="img" type="file">
                                    </span>
                                </div>

                                </span>
                                </div>
                            </div>

                            <div id="respuesta"></div>

                            <!-- Boton de publicar -->
                            <button class="btn waves-effect btn-color right" id="submit" type="button" name="public">Publicar
                                <i class="material-icons left">send</i>
                            </button>

                            <p id="respuesta" class="red-text"></p>
                        </form>

Código JS: $('#submit').click(function(){

var publicacion = document.getElementById('post').value;
var photo = document.getElementById('img').value;

// Enviar las variables a la ruta
var ruta = "public="+publicacion+"&img="+photo;

$.ajax({
    url: './backend/publication.php',
    type: 'POST',
    data: ruta,

})

.done(function(res){
    $('#respuesta').html(res)
})

.fail(function(){
    console.log("error");
})

.always(function(){
    console.log(publicacion);
});

});

Código PHP:

<?php session_start();

require_once('../connection/connection.php');
$email = $_SESSION['email'];
require_once('../user/user.php');
require_once('../backend/publication.php');

 // Obtener direccion ip del cliente
$ip = $_SERVER['REMOTE_ADDR'];

 // Obtener el navegador del visitante
$browser = $_SERVER['HTTP_USER_AGENT'];

$errors = '';
$maxSize = 2097152; // 2 MB

if(isset($_POST['public'])){

    $post = $_POST['public'];
    $photo = $_FILES['img'];

    // Obtenemos el nombre y la extension de la img
    $photoName = $photo['name'];

    // Obtenemos el tipo de la img
    $photoType = $photo['type'];

    // Asegurarnos que la imagen contenga un formato de img
    if($photoType == "image/jpg" || $photoType == "image/png" || $photoType == "image/jpeg" || $photoType == "image/git" || $photoType == "image/gif" || $photoType == ""){

        // Verificar el peso de la imagen
        if($photo['size'] >= $maxSize) {
            $errors = 'La imagen pesa mucho, por favor solo 2MB';
        }

        if(!is_dir('../photo')){
            mkdir('../photo', 0777);
        }

        // Movemos la img a la carpeta photo
        move_uploaded_file($photo['tmp_name'], '../photo/'.$photoName);

    }else {
        echo 'El tipo de imagen no es soportado';
    }

   // Limpiar
    $post = htmlspecialchars($post);
    $post = trim($post);
    $post = filter_var($post, FILTER_SANITIZE_STRING);

   // Si no hay errores, guardamos la pub en la BD
    if($errors == ''){
        $statement = $conexion->prepare('INSERT INTO publication (id_pub, id_user_pub, messeger_pub, photo_pub, ip_pub, browser_pub, create_at_pub) VALUES(
            null, :id_user, :post, :photoName, :ip, :browser, NOW())'
        );
        $statement->execute(array(
            ':id_user' => $id_user,
            ':post' => $post,
            ':photoName' => $photoName,
            ':ip' => $ip,
            ':browser' => $browser
        ));

    }
}
3
  • Para enviar una imagen en la petición AJAX también debes añadir después de data: ruta, lo siguiente contentType: false, cache: false, processData: false,
    – D.Bulten
    Commented el 7 feb. 2021 a las 21:07
  • Para obtener tus datos también podrías hacer lo siguiente: $(document).on('submit', '#form', function() { //Obtener datos formulario var ruta = new FormData(this); }
    – D.Bulten
    Commented el 7 feb. 2021 a las 21:11
  • Necesito ayuda para enviar el formulario Commented el 7 feb. 2021 a las 21:49

2 respuestas 2

1

Para enviar imágenes o archivos tienes que usar FormData, no puedes pasar esos valores como parte de una cadena. Eso es lo que significa multi-part: los formularios que envían archivos envían varias partes, por un lado los datos normales que se encontrarían en el $_POST y los archivos adjuntos, que se encontrarían en $_FILES.

Si te fijas en la parte de Ajax, he agregado dos opciones que son importantes cuando usas FormData, se trata de processData: false, para decirle a jQuery que no procese los datos, y de contentType: false para indicarle a jQuery que no establezca el tipo de contenido.

Hay varias formas de agregar los datos al objeto FormData().

Si necesitas enviar todos los inputs del formulario (archivos y texto), simplemente puedes hacer esto: var formData = new FormData(this); y FormData() recogerá todos los datos del formulario:

$("#form").submit(function(e) {
    e.preventDefault();    
    var formData = new FormData(this);
    $.ajax({
        url: './backend/publication.php',
        method: 'POST',
        data: formData,
        processData: false,
        contentType: false

    })
    .done(function(res){
        $('#respuesta').html(res)
    })
    .fail(function(){
        console.log("error");
    })
    .always(function(){
        console.log(publicacion);
    });
});

Si por el contrario sólo necesitas mandar unos datos específicos del formulario, entonces puedes agregarlos a mano, usando para ello el método append.

Por ejemplo:

$("#form").submit(function(e) {
    e.preventDefault();    
    /*Se crea el objeto vacío*/
    var formData = new FormData();


    var publicacion = document.getElementById('post').value;
    /*OJO: No se usa value para los input file*/
    var photo = document.getElementById('img').files[0];

    /*Agregamos los datos por separado*/
    formData.append('public', publicacion); 
    formData.append('img', photo); 

    $.ajax({
        url: './backend/publication.php',
        method: 'POST',
        data: formData,
        processData: false,
        contentType: false 

    })
    .done(function(res){
        $('#respuesta').html(res)
    })
    .fail(function(){
        console.log("error");
    })
    .always(function(){
        console.log(publicacion);
    });
});

Para más detalles sobre FormData() puedes consultar la documentación en MDN.

6
  • Copie el ultimo código de ejemplo tal cual pero no sucede nada Commented el 7 feb. 2021 a las 21:51
  • Cambie la primera linea de código $("#submit").click(function(e) { y ahora me lanza mensaje de error publication.js:9 Uncaught TypeError: Cannot read property 'files' of undefined at HTMLButtonElement.<anonymous> (publication.js:9) at HTMLButtonElement.dispatch (jquery.min.js:2) at HTMLButtonElement.v.handle (jquery.min.js:2) Commented el 7 feb. 2021 a las 21:52
  • @BraylinIvanPayano depura el código. Por ejemplo, en el servidor pon un var_dump($_POST); y un var_dump($_FILES); y dinos qué muestra. Revisa también la consola de Javascript y verifica que no hay otros errores.
    – A. Cedano
    Commented el 7 feb. 2021 a las 21:53
  • 1
    @BraylinIvanPayano había un error aquí: var photo = document.getElementById('img')[0].files[0];, la forma correcta sería así: var photo = document.getElementById('img').files[0];
    – A. Cedano
    Commented el 7 feb. 2021 a las 22:05
  • 1
    Ahora sii ha quedado correcto Commented el 7 feb. 2021 a las 22:09
0

Para enviar por codigo puro en Ajax, aunque este codigo solo les servira si quieren enviar no directamente la imagen, sino en base64.

    var imgBase64 = htmlImg.src.split(',')[1];// elimina el encabezado extra del base64
    var binaryData = atob(imgBase64);// Convierte la cadena Base64 en datos binarios
    
    var arrayBuffer = new ArrayBuffer(binaryData.length);//Crea un ArrayBuffer para almacenar los datos binarios
    var uint8Array = new Uint8Array(arrayBuffer);//Crea una vista de 8 bits (Uint8Array) para trabajar con el ArrayBuffer
    for (var i = 0; i < binaryData.length; i++) {// Copia los datos binarios en el Uint8Array
        uint8Array[i] = binaryData.charCodeAt(i);
    }
    // Crea una instancia de XMLHttpRequest
    var xhr = new XMLHttpRequest();
    xhr.open("POST","../database/photouser.php",true);
    xhr.setRequestHeader("Content-Type", "application/octet-stream");//Configura el encabezado para indicar que estás enviando datos binarios
    xhr.send(arrayBuffer);//Envía los datos binarios en el cuerpo de la solicitud
    xhr.onload = function () {//Define la función de devolución de llamada cuando se complete la solicitud
        if (xhr.status === 200) {
            console.log(xhr.responseText);//La solicitud se completó con éxito
        } else {
            console.error('Error en la solicitud');//Hubo un error en la solicitud
        }
    };
    fileInput.value="";
},100);

Normalmente cuando se genera una imagen y la intentamos enviar por ajax hay que transformar la imagen en el caso que este en el formato base64 y transformarlo a blob,

htmlImg.src.split(',')[1]

sirve para eliminar esta parte "data:image/jpeg;base64," y solo dejar el formato para evitar errores al enviar, y en el php se recolecta de la siguente manera:

// Obtener el contenido binario del cuerpo de la solicitud
$rawData = file_get_contents("php://input");
// Aquí $rawData contiene los datos binarios del ArrayBuffer enviado desde JavaScript
$file = fopen("../images/users/nombre_image.jpeg", "wb");//crea el archivo
$content = fwrite($file, $rawData);//imprime los datos dentro del archivo
fclose($file);//cierra el proceso
if($file == true) echo "exitoso";else echo "no se pudo";

Aunque debo que añadir que intentar enviar directo en base64 no nos permitira los navegadores porque tienen un limite de caracteres por eso claramente se enviar directo la imagen o en blob para procesarlo en el php.

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.