Cargar imágenes con PHP y Ajax
PHP

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

Relacionados

Envio de formulario por Ajax
Envio de formulario por Ajax
June 01,2017
Conexión a MySQL con PDO en PHP
Conexión a MySQL con PDO en PHP
June 01,2017
2 Extensiones para trabajar con PHP en Sublime Text
2 Extensiones para trabajar con PHP en Sublime Text
June 27,2018

Cursos relacionados

Crea tu Tienda OnLine
Crea tu Tienda OnLine
PHP
Login y Registro con PHP
Login y Registro con PHP
PHP
Mantenimiento de datos con PHP PDO y MVC
Mantenimiento de datos con PHP PDO y MVC
PHP