16
MayCargar 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?
