Guardar imágenes con jquery y PHP en el servidor

Una de las tareas de un desarrollador es mejorar no solo el rendimiento de una aplicación si no también la experiencia del usuario, en lo personal trato de no realizar recargas de pagina solo en caso de ser muy necesario, en este caso subir imágenes o archivos por medio de un formulario siempre se suponía hacer la recarga de la pagina, cosa que hace años ya no es necesario gracias a dos cosas uno es al jquery y otro a la actualización de navegadores, en este ejemplo voy a mostrar como hacer un jquery file upload sin recargar la pagina utilizando Ajax.

Lo primero seria crear nuestro formulario en html, en este ejemplo estoy usando el modal de bootstrap

En el formulario tenemos un input que corresponde al nombre de la imagen que queremos darle, el resultado final seria guardar con ese nombre la imagen

<form id="data" method="post" enctype="multipart/form-data">
<div class="modal fade bs-example-modal-lg" id="upload" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Imagenes</h4><div id="nombre"></div>
            </div>
            <div class="modal-body">

                <div class="row">
                    <div class="col-md-12">
                        <input name="image" type="file" id="image" class="btn btn-warning" />

                        <input type="hidden" class="form-control"  name="action" value="ajax">
                        <input type="hidden" class="form-control"  name="upload" value="ajax">
                        <input type="hidden" class="form-control"  id="code" name="code">
                    </div>
                </div>


            </div>
            <div class="modal-footer">
                <img src='img/save.gif' class='img-responsive center-block' id="cargando0" style="display: none" />
                <img src='img/save.gif' class='img-responsive center-block' id="up" style="display: none" />
                <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
                <button id="upload2" class="btn btn-info">Subir Imagen</button>


            </div>
        </div>
    </div>
</div>
</form>

Nuestro código javascript seria el siguiete se puede fijar que estamos utilizando FromData, ya que nos encontramos utilizando el modal se puede ver que una vez terminado el proceso cerramos el modal, esto queda a gusto de cada quien, tampoco es obligatorio para este ejemplo utilizar

$("form#data").submit(function(e) {
            e.preventDefault();
            var formData = new FormData($(this)[0]);

            $.ajax({
                url: 'ajax/upload.php',
                type: 'POST',
                data: formData,
                beforeSend: function(objeto){
                    $('#up').show();
                },
                success: function (data) {
                    $(".mensaje").html(data).fadeIn('slow');
                  
                    $("#upload").modal('hide');
                    $('#up').hide();
                    $('#image').val('');
                },
                cache: false,
                contentType: false,
                processData: false
            });
        });

Por ultimo nuestro código php quedaría de este modo

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

        $archivo = $_FILES['image']['name'];
        if (isset($archivo) && $archivo != "") {
            $tipo = $_FILES['image']['type'];
            $tamano = $_FILES['image']['size'];
            $temp = $_FILES['image']['tmp_name'];
            $code = $db->real_escape_string($_POST['code']);
            $tipoArchivo = strtolower(pathinfo($_FILES["image"]["name"], PATHINFO_EXTENSION));
            $nombre = $code.'.'.$tipoArchivo;
            //echo $nombre;
            if (!((strpos($tipo, "gif") || strpos($tipo, "jpeg") || strpos($tipo, "jpg") || strpos($tipo, "png")) && ($tamano < 20000000))) {
                echo '<div class="alert alert-danger" role="alert">Error. La extensión o el tamaño de los archivos no es correcta.<br/>
        - Se permiten archivos .gif, .jpg, .png. y de 2mb como máximo.</div>';
            }
            else {
                if (move_uploaded_file($_FILES['image']['tmp_name'], '../../../img/' . $nombre)) {

                    echo '<div class="alert alert-success" role="alert">La imagen se subio correctamente</div>';
                    
                }
                else {
                    echo '<div class="alert alert-danger" role="alert">Ocurrio un error al guardar la imagen</div>';
                }
            }
        }



    }

Esta en la tarea de subir imagenes con ajax y php, como se puede ver no necesita mucho codigo y es muy facil de implemetar. Si deseamos guardar en una base de datos con este ejemplo se adapta muy facilmente ya que estamos dando ya nombre a la imagen.