0

Hola estoy atorado en una aplicación que estoy haciendo. tengo este código que es para subir una imagen a una carpeta de mi servidor pero a la hora que le doy subir no me sube la imagen solo me muestra el previem algun consejo? algun consejo o ayuda que me pudiera dar o correcion de mi codigo, esto lo quiero implementar un registro a mi pagina pero quiero subir la imagen en el formulario

**INDEX*

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>

<script>
$(document).ready(function() {
    $(".upload").on('click', function() {
        var formData = new FormData();
        var files = $('#image')[0].files[0];
        formData.append('file',files);
        $.ajax({
            url: 'upload.php',
            type: 'post',
            data: formData,
            contentType: false,
            processData: false,
            success: function(response) {
                if (response != 0) {
                    $(".card-img-top").attr("src", response);
                } else {
                    alert('Formato de imagen incorrecto.');
                }
            }
        });
        return false;
    });
});
</script>
</head>

<body>

<div class="container">

    <h2 class="lead"></h2>



            <form method="post" action="#" enctype="multipart/form-data">
                <div class="card" style="width: 18rem;">
                    <img class="card-img-top" src="images/default-avatar.png">
                    <div class="card-body">
                        <h5 class="card-title">Sube una foto</h5>

                        <div class="form-group">

                            <input type="file" class="form-control-file" name="image" id="image">
                        </div>
                        <input type="button" class="btn btn-primary upload" value="Subir">
                    </div>
                </div>
            </form>
        </div>
    </div>

    <
</body>
</html>

En esta parte tengo el php que recibe los datos para poder almacenarlos

<?php
if (is_array($_FILES) && count($_FILES) > 0) {
    if (($_FILES["file"]["type"] == "image/pjpeg")
        || ($_FILES["file"]["type"] == "image/jpeg")
        || ($_FILES["file"]["type"] == "image/png")
        || ($_FILES["file"]["type"] == "image/gif")) {
        if (move_uploaded_file($_FILES["file"]["tmp_name"], "images/".$_FILES['file']['name'])) {
            //more code here...
            echo "images/".$_FILES['file']['name'];
        } else {
            echo 0;
        }
    } else {
        echo 0;
    }
} else {
    echo 0;
}

seria de mucha ayuda que me pudieran asesorar en esto

1
  • 1.- ¿La carpeta images existe? 2.- ¿Qué permisos tiene dicha carpeta? 3.- ¿Cuánto pesan las imágenes? 4.- ¿Cuál es el valor de las variables upload_max_filesize y post_max_size?
    – Marcos
    Commented el 16 ene. 2020 a las 2:50

1 respuesta 1

1

Tienes que hacer unas modificaciones a código html, javascript y php:

  1. Agregarle un id a tu form

<form id="mi-asombroso-form" method="post" action="#" enctype="multipart/form-data">
  1. Modificar el código jquery a esto:

$(".upload").on('click', function() {        
        $.ajax({
            url: 'upload.php',
            type: 'post',
            //I. Modificación
            data: new FormData($('#mi-asombroso-form')[0]),
            contentType:false,
            //II. Modificación
            cache:false,
            processData:false,
            success: function(response) {
                //III. Modificación
                if (parseInt(response) != 0) {
                    $(".card-img-top").attr("src", response);
                } else {
                    alert('Formato de imagen incorrecto.');
                }
            }
        });
        return false;
});

Explico los puntos modificados:

I. Cambiamos la forma de enviar el formulario como objeto por jquery a php de una manera serializada.

II. Usamos cache como false para forzar al navegador a no almacenar caché en ningún momento

III. Parseamos el 0 a tipo entero con parseInt tu respuesta desde php para que forcemos a que se lea como tal y no como string como ajax lo responde desde php.

  1. Tu código php recibe con la variable global $_FILES la información que le pertenece al input de tipo file y el resto de tipo de inputs con $_POST

<?php
//esto te servirá para ver qué recibes por parte de tu input `$_FILES`
print_r($_FILES);
//...después va tu código que tienes

Es importante también que:

  1. Tu carpeta donde guardas las imágenes y las apuntas para guardar en tu move_uploaded_file llamada images exista en el mismo nivel de tu archivo php. Como una recomendación, siempre ocupa la constante __DIR__ para que no haya fallos en encontrar la ruta en el servidor.

Esto quedaría en tu código php de ser esto:

move_uploaded_file($_FILES["file"]["tmp_name"], "images/".$_FILES['file']['name'])

A esto:

move_uploaded_file($_FILES["file"]["tmp_name"], __DIR__ . "/images/".$_FILES['file']['name'])
  1. Que la carpeta images existente tenga permisos de escritura y lectura

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.