0

en este momento me encuentro tratando de subir una foto con a x carpeta pero no se ejecuta el guardado de la foto, ya que cuando pulso el botón se envía es la página completa y no se hace el proceso sin recargar la pagina, a continuación dejo los códigos que tengo en el localhost. html

<form name="frmSubir" id="frmSubir" method="post" enctype="multipart/form-data">
          <input type="file" name="foto" class="profile-image-upload hidden"/>
          <div style="color:#999;">click en la foto para cambiarla</div>
          <input type="submit" class="btn_enviar" value="Guardar Foto" />
          </form>
        <div id="cargado"></div>

el js

$(document).ready(function(){
$('.btn_enviar').on("click", function(evt){
    evt.preventDefault();
    // declaro la variable formData e instancio el objeto nativo de javascript new FormData
    var formData = new FormData(document.getElementById("frmSubir"));
    // declaro la variable ruta
    var ruta = 'peticion/guardar-foto.php';
    // iniciar el ajax
    $.ajax({
        url: ruta,
        // el metodo para enviar los datos es POST
        type: "POST",
        // colocamos la variable formData para el envio de la imagen
        data: formData,
        contentType: false,
        processData: false,
        beforeSend: function(){
        $('#cargado').prepend('<i class="fa fa-refresh fa-spin"></i> subiendo foto...');
        },
        success: function(data){
        $('#cargado').fadeIn("slow",function(){
                $('#cargado').html(data);
        });
        }
    });
});
});

y el php

<?php
if(isset($_FILES["foto"]))
{
$file = $_FILES["foto"];
$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 = "img/foto/";
if($tipo != 'image/jpg' && $tipo !='image/jpeg' && $tipo !='image/png' && $tipo !='image/gif')
{echo '<h3 class="alert alert-danger" role="alert"><i class="fa fa-close"></i> Error: el archivo no es una imagen.</h3>';}
else if ($size > 1024*1024)
{echo '<h3 class="alert alert-danger" role="alert"><i class="fa fa-close"></i> Error: el tamaño máximo es de una 1Mb.</h3>';}
else if ($width > 500 || $height > 500)
{echo '<h3 class="alert alert-danger" role="alert"><i class="fa fa-close"></i> Error la anchura y la altura maxima permitida es 500px</h3>';}
else if($width < 100 || $height < 100)
{echo '<h3 class="alert alert-danger" role="alert"><i class="fa fa-close"></i> Error la anchura y la altura mínima permitida es 100px</h3>';}
else
{
    $src=$_SERVER['DOCUMENT_ROOT'].'/'.$carpeta.$nombre;
    move_uploaded_file($ruta_provisional, $src);
    echo '<h3 class="alert alert-success" role="alert"><i class="fa fa-check"></i> Se actualizó tu foto de perfil.</h3>';
    //echoecho '<meta http-equiv="refresh" content="1" />';
}
}
?>

el documen root ya se que no va ahí jajaja ese si lo saco después ya que lo tenía de prueba en el localhost, gracias por su ayuda uso el jquery 3.2.1

2

4 respuestas 4

1

La pagina se recarga porque usas un submit, reemplaza:

<input type="submit" class="btn_enviar" value="Guardar Foto" />

por

<button type="button" class="btn_enviar" value="Guardar Foto" >Guardar Foto</button>
7
  • dale amigo deja ensayo si es ese el error que hace que no se suba la foto, y te comento. el 1 sep. 2017 a las 3:26
  • eso es para solucionar que la pagina deje de recargar. El subir la foto por ajax es otro problema, te comento que hasta donde recuerdo no se puede.
    – juliocpiro
    el 1 sep. 2017 a las 3:28
  • bueno amigo lo del botón se solucionó muy bien, pero será mejor subir la foto con PHP puro y validado bien ? el 1 sep. 2017 a las 3:31
  • Use antes una librería para eso, estoy buscándola dame unos minutos.
    – juliocpiro
    el 1 sep. 2017 a las 3:32
  • dale amigo toma el tiempo el 1 sep. 2017 a las 3:33
0

Buen día

Lo siguiente fue una implementación tomada de Simple File Uploads Using jQuery & AJAX a mi me funciono:

Según corresponda tu html "tendrá"

<input type="file" id="Filedata" name="Filedata" placeholder="[tu leyenda]" 
      accept="image/*" onchange="prepareUpload(event)" />

en mi caso el accept="image/*" es por que indico solo imágenes; mira en HTML accept Attribute los que puedes poner:

Declaramos

function prepareUpload(event)
{
  files = event.target.files;
} 

y por separado finalmente como procesariamos los datos para enviar el archivo; desde luego si necesitas más parámetros agregalos como corresponda (por GET o POST).

// Previo a tu Ajax
var dataf = new FormData();
$.each(files, function(key, value)
{
    dataf.append(key, value);
});

// el Url que se indica fijate que termina en "?files" es necesario, 
// si fueran más parámetros pos GET te sugiero ponerlo al final "&files"
// aquí es solo uno por eso el "?"
$.ajax( {
    url:"[rutayArchivoqueProcesaraelArchivo]?files",
    cache:false,
    dataType: 'json',
    type: 'POST',
    data: dataf,
    processData: false, 
    contentType: false, 
    success: function (data) {
            // lo que hagas en caso éxito
    },
    error: function (jqXHR, textStatus, errorThrown) {
        // Lo que hagas en caso falle
    }
}
);

Espero te sea de utilidad.

Notas:

Tarde en encontrar el código como lo implemente.

No use etiquetas FORM toda vez que los datos yo los obtenia con jQuery con su selector input textarea...etc tanto su nombre y valor para pasarlos por POST o GET según defini

0

Para que la pagina no recargue puedes usar la libreria jquery.form y su funcion ajaxForm que realizara el submit sin recargar la pagina

agrega al head la libreria:

<script src="http://malsup.github.com/jquery.form.js"></script> 

modifica el form agregando el action y quitando el boton submit del <form> y reemplazandolo por <button>

<form action="peticion/guardar-foto.php" name="frmSubir" id="frmSubir" method="post" enctype="multipart/form-data">
      <input type="file" name="foto" class="profile-image-upload hidden"/>
      <div style="color:#999;">click en la foto para cambiarla</div>
</form>

<button type="button" class="btn_enviar" value="Guardar Foto" >Guardar Foto</button>

en javascript agrega:

$(document).ready(function(){
    $("#frmSubir").ajaxForm({
        dataType: 'json',
        resetForm: true,
        success: function(data) {
            //aqui tu codigo despues de finalizar la carga del "ajax" 
            $('#cargado').fadeIn("slow",function(){
                $('#cargado').html(data);
            });            
        }
    });

    //evento click al boton btn_enviar
    $('.btn_enviar').click(function() {
        $("#frmSubir").submit();        
    });
});
0

Resuelto, te muestro el index.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form name="frmSubir" id="frmSubir" method="post" enctype="multipart/form-data">
          <input type="file" name="foto" class="profile-image-upload hidden"/>
          <div style="color:#999;">click en la foto para cambiarla</div>
          <input type="submit" class="btn_enviar" value="Guardar Foto" />
          </form>
        <div id="cargado"></div>

    <script type="text/javascript" src="jquery/jquery-3.2.1.min.js"></script>    
    <script>
        $(document).ready(function(){
        $('.btn_enviar').on("click", function(evt){
            evt.preventDefault();
            // declaro la variable formData e instancio el objeto nativo de javascript new FormData
            var formData = new FormData(document.getElementById("frmSubir"));
            // declaro la variable ruta
            var ruta = 'peticion/guardar-foto.php';
            // iniciar el ajax
            $.ajax({
                url: ruta,
                // el metodo para enviar los datos es POST
                type: "POST",
                // colocamos la variable formData para el envio de la imagen
                data: formData,
                contentType: false,
                processData: false,
                beforeSend: function(){
                $('#cargado').prepend('<i class="fa fa-refresh fa-spin"></i> subiendo foto...');
                },
                success: function(data){
                $('#cargado').fadeIn("slow",function(){
                        $('#cargado').html(data);
                });
                }
            });
        });
        });
    </script>
</body>
</html>

El archivo guardar foto:

<?php
if(isset($_FILES["foto"]))
{
$file = $_FILES["foto"];
$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 = "img/foto/";


    $src=$carpeta.$nombre;
    move_uploaded_file($ruta_provisional, $src);
    echo '<h3 class="alert alert-success" role="alert"><i class="fa fa-check"></i> Se actualizó tu foto de perfil.</h3>';
    //echoecho '<meta http-equiv="refresh" content="1" />';
}
?>

Quite las validaciones de la imagen para probar, de hecho tu codigo esta bien, no se porque te recarga la pagina, si con evt.preventDefault() su funcion es prevenir el envio automatico y lo hace bien.

Si la imagen no se guarda donde quieres, asegurate que la carpeta "img" y la carpeta que esta dentro de ella "foto" existan antes de mandar a guardar la foto. Si no esta creado, y quieres que se cree por medio de codigo, utiliza mkdir($directorio, 0755) or die("No se puede crear el directorio de extracción"); justo antes de el move_uploaded_file($ruta_provisional, $src);

Espero te sir

Tu Respuesta

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

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