6

Estoy haciendo un administrador para imágenes y textos con ajax, ya logré poder editar, agregar y eliminar registros del sitio mediante el motor. Lo que ahora no estoy consiguiendo es poder subir el archivo por ajax mediante ID. Os dejo aquí el código con el que me estoy peleando ahora mismo. ¿Álguien podría darme una mano, por favor?

CODIGO HTML

<div class="form-group">
<label class="col-md-2 control-label">Imagen</label>
<div class="col-md-7">
    <input type="file" name="archivo" id="imagen" class="form-control"/>
</div>

CODIGO AJAX

function editaSliders(){
var url = 'php/slidersAgregar.php';
$.ajax({
    type:'POST',
    url:url,
    data:$('#form_edi_sliders').serialize(),
    new FormData(),
    success: function(edicion){
        if ($('#edi_Slider').val() == 'Edicion'){
        alertify.success("Edición realizada.");
        $('#edita-sliders').modal('hide');
        $('#sliders').html(edicion);
        return false;
        }
    }
});
return false;}

function editarSliders(idSlide){
$('#form_edi_sliders')[0].reset();
var url = 'php/slidersEditar.php';
    $.ajax({
    type:'POST',
    url:url,
    data:'id='+idSlide, // envia a PHP ej.: $_POST['id'];
    success: function(valores){
            var datos = eval(valores);
            $('#edi_Slider').val('Edicion');
            $('#idSlide').val(idSlide);
            $('#imagen2').val(datos[0]);
            $('#textogrande').val(datos[1]);
            $('#textomediano').val(datos[2]);
            $('#textochico').val(datos[3]);
            $('#directorio').val(datos[4]);
            $('#edita-sliders').modal({
                show:true,
                backdrop:'static'
            });
        return false;
    }
});
return false;}

Actualmente, al abrir el modal se puede editar y actualizar sin problemas todos los textos, pero en el input de file me sale como UNDEFINED INDEX, o sea, que está recibiendo el campo vacío.

3
  • ¿En qué línea recibes el mensaje de undefined index?¿El error ocurre en JavaScript o en PHP?
    – Alvaro Montoro
    el 27 may. 2016 a las 2:40
  • @AlvaroMontoro gracias por tu participación.. Y ocurre en el PHP, "Notice: Undefined index: archivo in C:\xampp\htdocs\root\egoijdg\admin\admin\php\slidersAgregar.php on line 6" está diciendo que recibió vacío.. Por eso mi teoría es que el problema es en el script.. el 27 may. 2016 a las 12:06
  • Te dejo un par de páginas que consulte en su día para hacer algo parecido, aunque creo que el fallo esta en que no tienes la definición del FORM Como subir una imagen con ajax y php Subir imagenes con php y jquery el 20 jun. 2016 a las 7:48

3 respuestas 3

4

Es sencillo, primero tienes que crear el form asi:

<form id="uploadimage" action="" method="post" enctype="multipart/form-data">
<input type="file" name="file" id="file" required />
<input type="submit" value="Upload" class="submit" />
</form>
<div id="respuesta"></div>

En el Head ingreso lo siguiente:

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

<script>
     $(function(){
        $("input[name='file']").on("change", function(){
            var formData = new FormData($("#uploadimage")[0]);
            var ruta = "imagen-ajax.php";
            $.ajax({
                url: ruta,
                type: "POST",
                data: formData,
                contentType: false,
                processData: false,
                success: function(datos)
                {
                    $("#respuesta").html(datos);
                }
            });
        });
     });
</script>

Y en tu creas un archivo PHP llamado "imagen-ajax.php" y pones este codigo para recibir la imagen:

<?php
if (isset($_FILES["file"]))
{
    $file = $_FILES["file"];
    $nombre = $file["name"];
    $tipo = $file["type"];
    $ruta_provisional = $file["tmp_name"];
    $size = $file["size"];
    $dimensiones = getimagesize($ruta_provisional);
    $width = $dimensiones[0];
    $height = $dimensiones[1];
    $carpeta = "imagenes/";

    if ($tipo != 'image/jpg' && $tipo != 'image/jpeg' && $tipo != 'image/png' && $tipo != 'image/gif')
    {
      echo "Error, el archivo no es una imagen"; 
    }
    else if ($size > 1024*1024)
    {
      echo "Error, el tamaño máximo permitido es un 1MB";
    }
    else if ($width > 500 || $height > 500)
    {
        echo "Error la anchura y la altura maxima permitida es 500px";
    }
    else if($width < 60 || $height < 60)
    {
        echo "Error la anchura y la altura mínima permitida es 60px";
    }
    else
    {
        $src = $carpeta.$nombre;
        move_uploaded_file($ruta_provisional, $src);
        echo "<img src='$src'>";
    }
}
?>

Pruebalo y nos dices ;)!

5
  • Encontre ese mismo codigo en otra pagina y me funciona,osea me manda las fotos a una carpeta,pero no hay una forma de que yo la suba al registro del usuario logueado??Me explico......La imagen es para ponerla de perfil y lo hago desde una ventana modal y me gustaria que me guardara la foto en el campo "Foto" del usuario logueado.Como lo hago.?Escogiendo el ID??Donde coloco el codigo?En el else??
    – luis
    el 17 sep. 2016 a las 2:40
  • 1
    puedes hacerlo ingresando un <input type='hidden' value='ID_USUARIO'> en el form. o si no puedes hacerlo directamente en el "imagen-ajax.php" para guardalo en la BD dependiendo el usuario es decir: en el php creas una variable con una session $id_usuario = $_SESSION["1"]; y lo guardas en la BD.. hay distintas maneras, pero la que mas te guste puedes utilziarlo.. :)!
    – Jean Paul
    el 19 sep. 2016 a las 13:36
  • funciona de maravilla, solo no hay que olvidar crear la carpeta imagenes. el 10 abr. 2018 a las 16:16
  • No me sirve este código y no sé por qué. el 13 jun. 2018 a las 14:40
  • La solución es excelente desde el punto de vista del propósito. Pero crea un agujero de seguridad en el sistema de archivos. No se debe asignar a un archivo el nombre asignado por el usuario pues hace posible una eventual sobreescritura de archivos críticos.
    – quevedo
    el 29 jun. 2018 a las 3:22
0

Buenas, creo que puede ser que en el HTML del formulario te falta asignar el enctype.

Ejemplo:

<form action="..." method="..." enctype="multipart/form-data"></form>

Ese error suele darse por eso.

Espero haberte ayudado, Saludos

1
  • Hola y gracias por tu participación Eric.. Y mira, en Ajax con agregar el codigo "new FormData()," ya le estas suplantando al enctype de HTML.. Pues bien que ya he intentado también.. Y sin éxito aún.. el 27 may. 2016 a las 17:13
0

Tienes bastantes errores, primero, en el ajax inicial de editaSliders() tu "FormData()" está en un lugar muy mal colocado debido a que no puedes meter código si no estás usando las opciones de JQUERY disponibles.

Código erróneo:

function editaSliders(){
var url = 'php/slidersAgregar.php';
$.ajax({
    type:'POST',
    url:url,
    data:$('#form_edi_sliders').serialize(),
    new FormData(),
    success: function(edicion){
        if ($('#edi_Slider').val() == 'Edicion'){
        alertify.success("Edición realizada.");
        $('#edita-sliders').modal('hide');
        $('#sliders').html(edicion);
        return false;
        }
    }
});
return false;}

Código "bueno":

function editaSliders(){
var url = 'php/slidersAgregar.php';
$.ajax({
    type:'POST',
    url:url,
    data: new FormData($("#iddelform")[0]),
    contentType: false,
    success: function(edicion){
        if ($('#edi_Slider').val() == 'Edicion'){
        alertify.success("Edición realizada.");
        $('#edita-sliders').modal('hide');
        $('#sliders').html(edicion);
        }
    }
});
return false;}

No sé exactamente cómo está estructurado tu formulario, sin embargo quiero pensar que la primer función que te coloco está una parte que edita contenidos de texto y demás, si quisieras mandar una imagen también deberás setear la propiedad de contentType: false más o menos ya te ayudaron arriba, sin embargo en tu PHP hay otro problema, si logras enviar la información por default y agregando como ya dijeron el enctype te recomiendo debuggear la aplicación

Utiliza en el código jQuery en tu AJAX en la opción de success agrega un:

console.log(edicion); 

O valores dependiendo de cuál success vas a debuggear. Posterior en tu código PHP simplemente hazle un var_dump($_POST) y un var_dump($_FILES) ...

Una parte de tu error significa que posiblemente tu nombre del input de imagen no está marcado correctamente:

<input type="file" name="archivo" id="imagen" class="form-control"/>

Y en tu PHP no sé cómo lo manejes pero deberás recibir de la forma:

$archivo = $_FILES['archivo'];

Y entonces ya puedes manipular $archivo como gustes.

Recuerda que para solicitar ayuda de forma más fácil te recomiendo que anexes los códigos PHP también y limpies un poco tu código (utiliza cosas como JSBeautify para acomodar el código JavaScript por ejemplo).

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.