Cargar imágenes con PHP y Ajax

Aprende a desarrollar un formulario con el cual podrás cargar imagenes con ajax y php al servidor

Cargar imágenes con PHP y Ajax

En este post te enseñare a cargar imágenes al servidor haciendo uso de php y ajax, trataremos de cubrir todos los parámetros para que puedas incluir este ejemplo en tus próximos proyectos.


1. Crear el formulario

Para realizar este ejercicio es necesario que creemos un formulario con al menos un campo de tipo file y un botón para el envío del mismo, en el siguiente vídeo te explicamos todo el proceso que debes de seguir para generar el formulario de manera correcta.


<html lang="es">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>Enviar imágen por Ajaxtitle>
    <link href="https://bootswatch.com/readable/bootstrap.min.css" rel="stylesheet">
    <style>
        body {
            padding-top: 50px;
        }

        .starter-template {
            padding: 40px 15px;
            text-align: center;
        }
    <style>
<head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigationspan>
                <span class="icon-bar">span>
                <span class="icon-bar">span>
                <span class="icon-bar">span>
            button>
            <a class="navbar-brand" href="#">Formando Códigoa>
        div>
        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Formularioa>li>
                <li><a target="_blank" href="https://formandocodigo.com">Vistar sitioa>li>
                <li><a target="_blank" href="https://youtube.com/formandocodigo">Ver canala>li>
            <ul>
        <div>
    <div>
<div>
<div class="container">
    <div class="starter-template">
        <div class="row">
            <div class="col-md-6 col-md-offset-3">
                <div class="panel panel-default">
                	<div class="panel-body">
                        <form id="frmSubirImagen" action="enviar.php" method="POST" role="form" enctype="multipart/form-data">
                            <legend>Subir imágen por ajaxlegend>

                            <div class="form-group">
                                <label for="imagen">Selecciona imágenlabel>
                                <input type="file" class="form-control" name="imagen" id="imagen" required>
                            <div>

                            <button type="submit" class="btn btn-primary">Cargar imágenbutton>
                        <form>
                	<div>
                <div>
            <div>
        <div>
    <div>
<div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"><script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"><script>
<script src="js/subirImagen.js"><script>
<body>
<html>


2. Archivo php a donde se va a enviar el formulario

Necesitamos un lenguaje de programación web para realizar la carga del archivo y para ello vamos a usar PHP, el archivo que generamos es enviar.php y es adonde se va a enviar el formulario, a continuación tienes el código.



/**
 * Created by Dac Developers & Formando Código.
 * User: Cesar Mejia
 * Date: 9/03/2017
 * Time: 1:22 AM
 */

$ruta_carpeta = "imagenes/";
$nombre_archivo = "imagen_".date("dHis") .".". pathinfo($_FILES["imagen"]["name"],PATHINFO_EXTENSION);
$ruta_guardar_archivo = $ruta_carpeta . $nombre_archivo;

if(move_uploaded_file($_FILES["imagen"]["tmp_name"],$ruta_guardar_archivo)){
    echo "imagen cargada";
}else{
    echo "no se pudo cargar";
}

?>


3. AJAX para el envió del formulario

Para finalizar necesitamos el AJAX y esto lo logramos con ayuda de javascript y su potente librería Jquery, a continuación, te dejo el código para el archivo js.


$(document).ready(function () {
    var frm = $("#frmSubirImagen");
    var btnEnviar = $("button[type=submit]");

    var textoSubir = btnEnviar.text();
    var textoSubiendo = "Cargando imágen";

    frm.bind("submit",function () {

        var frmData = new FormData;
        frmData.append("imagen",$("input[name=imagen]")[0].files[0]);

        $.ajax({
            url: frm.attr("action"),
            type: frm.attr("method"),
            data: frmData,
            processData: false,
            contentType: false,
            cache: false,
            beforeSend: function (data) {
                btnEnviar.html(textoSubiendo);
                btnEnviar.attr("disabled",true);
            },
            success: function (data) {
                btnEnviar.html(textoSubir);
                btnEnviar.attr("disabled",false);
            }
        });
        return false;
    });
});


Finalizamos este ejercicio práctico con una pregunta para los lectores de este post: ¿Qué otro ejemplo práctico AJAX quisieras ver?


Compartir:


0 Comentarios

Este curso no cuenta con comentarios aún; puedes ser el primero, escribenos tu duda, consulta, sugerencia o calificación.

Comentar ahora

Tutor

Tutor
Cesar Alan
Desarrollador de Software

Post Relacionados

Envio de formulario por Ajax

Descubre como enviar datos por ajax de manera sencilla y segura


Conexión a MySQL con PDO en PHP

Aprende prácticamente a conectarte a una base de datos MySQL con la extension PDO en PHP


2 Extensiones para trabajar con PHP en Sublime Text

Te muestro las 2 extensiones que uso frecuentemente para desarrollar con PHP en Sublime Text


Calificación

4.5

5 Comentarios
Comentar ahora