{"id":1260,"date":"2017-03-27T20:06:34","date_gmt":"2017-03-27T19:06:34","guid":{"rendered":"https:\/\/www.kumbiaphp.com\/blog\/?p=1260"},"modified":"2020-09-02T17:51:21","modified_gmt":"2020-09-02T16:51:21","slug":"subir-imagen-y-datos-con-kumbiaphp","status":"publish","type":"post","link":"https:\/\/kumbiaphp.com\/blog\/2017\/03\/27\/subir-imagen-y-datos-con-kumbiaphp\/","title":{"rendered":"Subir im\u00e1genes y datos con el mismo formulario html"},"content":{"rendered":"<p>\u00a1Hola Kumbieros! Hoy les traigo un tutorial b\u00e1sico para quienes deseen conocer como subir im\u00e1genes y datos con el mismo formulario. Es una pregunta recurrente que hemos tenido en nuestro chat de Slack y no es sencilla de responder por ese medio, por eso <span class=\"_5yl5\">les presentar\u00e9 un ejemplo pr\u00e1ctico de la creaci\u00f3n y actualizaci\u00f3n de<\/span> usuario con foto de perfil.<\/p>\n<p>Crearemos un modelo, un controlador y tres vistas, usaremos la librer\u00eda Upload incluida en KumbiaPHP para gestionar la subida del archivo. Al final dejo el enlace con el c\u00f3digo fuente en un repositorio en Github para que puedan ver el ejemplo completo, incluso descargarlo y ponerlo a funcionar.<\/p>\n<h2>Base de datos<\/h2>\n<p>Lo primero es la tabla en la base de datos:<\/p>\n<pre><code class=\"language-sql\" data-line=\"\">\nCREATE TABLE IF NOT EXISTS `user` (\n  `id` int(11) NOT NULL AUTO_INCREMENT,\n  `name` varchar(255) NOT NULL,\n  `age` int(11) NOT NULL DEFAULT &#039;0&#039;,\n  `email` varchar(255) NOT NULL,\n  `photo` varchar(255) DEFAULT &#039;default.png&#039;,\n  PRIMARY KEY (`id`)\n) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8;\n<\/code><\/pre>\n<h2>Modelo<\/h2>\n<p>Ahora el modelo que hereda de ActiveRecord para que nos de la capacidad de operaciones con la tabla de la base de datos:<\/p>\n<p>Archivo: <em>app\/models\/user.php<\/em><\/p>\n<pre><code class=\"language-php\" data-line=\"\">\n&lt;?php\n\n\/**\n* Clase para manejar los datos del usuario, tabla &#039;user&#039;\n*\/\nclass User extends ActiveRecord \n{\n\n}\n<\/code><\/pre>\n<h2>Controlador<\/h2>\n<p>Ahora el controlador que nos permitir\u00e1 pasar y recibir datos de las vistas. Arrancaremos con el listado de usuarios y para esto creamos la funci\u00f3n <em>index<\/em>.<\/p>\n<p>Archivo: <em>app\/controllers\/user_controller.php<\/em><\/p>\n<pre><code class=\"language-php\" data-line=\"\">\n&lt;?php\n\/**\n&nbsp;* Controlador para las acciones y vistas con el usuario\n&nbsp;*\/\nclass UserController extends AppController\n{\n\n&nbsp;&nbsp;&nbsp; public function index()\n&nbsp;&nbsp;&nbsp; {\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; $this-&gt;data = (new User)-&gt;find();\n&nbsp;&nbsp;&nbsp; }\n}\n<\/code><\/pre>\n<h2>Vistas<\/h2>\n<p>Y su respectiva vista.<\/p>\n<p>Archivo: <em>app\/views\/user\/index.phtml<\/em><\/p>\n<pre><code class=\"language-php\" data-line=\"\">\n&lt;h1&gt;Lista de usuarios&lt;\/h1&gt;\n&lt;?= Html::linkAction(&#039;create&#039;, &#039;Crear&#039;, &#039;class=&quot;button&quot;&#039;) ?&gt;\n&lt;?php View::content() ?&gt;\n&lt;?php if (count($data)) { ?&gt;\n    &lt;table class=&quot;u-full-width&quot;&gt;\n        &lt;thead&gt;\n            &lt;tr&gt;            \n                &lt;th&gt;Nombre&lt;\/th&gt;\n                &lt;th&gt;Edad&lt;\/th&gt;\n                &lt;th&gt;Correo&lt;\/th&gt;\n                &lt;th&gt;Foto&lt;\/th&gt;\n                &lt;th&gt;Acciones&lt;\/th&gt;\n            &lt;\/tr&gt;\n        &lt;\/thead&gt;\n        &lt;tbody&gt;\n            &lt;?php foreach ($data as $item) { ?&gt;\n                &lt;tr&gt;\n                    &lt;td&gt;&lt;?= $item-&gt;name ?&gt;&lt;\/td&gt;\n                    &lt;td&gt;&lt;?= $item-&gt;age ?&gt;&lt;\/td&gt;\n                    &lt;td&gt;&lt;?= $item-&gt;email ?&gt;&lt;\/td&gt;\n                    &lt;td&gt;&lt;?= $item-&gt;photo ?&gt;&lt;\/td&gt;\n                    &lt;td&gt;&lt;?= Html::linkAction(&quot;edit\/$item-&gt;id&quot;, &#039;Editar&#039;) ?&gt; | &lt;?= Html::linkAction(&quot;update_photo\/$item-&gt;id&quot;, &#039;Actualizar foto&#039;) ?&gt;&lt;\/td&gt;\n                &lt;\/tr&gt; \n            &lt;?php } ?&gt;        \n        &lt;\/tbody&gt;\n    &lt;\/table&gt;\n&lt;?php } else { ?&gt;\n    &lt;h2&gt;No hay ning\u00fan registro&lt;\/h2&gt;\n&lt;?php } ?&gt;\n<\/code><\/pre>\n<p><!--more-->C\u00f3mo pueden observar hemos dejado listo los enlaces a las acciones de Crear, Editar y Actualizar foto, usando el helper <em>Html::linkAction()<\/em> por compatibilidad para cuando ustedes lo prueben sin importar la carpeta de instalaci\u00f3n de la app, porque lo ideal es que los enlaces sean en HTML directamente.<\/p>\n<h2>Vista para subir im\u00e1genes y datos<\/h2>\n<p>Ahora viene lo interesante y empezaremos con un formulario con el atributo enctype igual a &#8216;multipart\/form-data&#8217; usando el helper <em>Form::openMultipart()<\/em>, como en la siguiente vista:<\/p>\n<p>Archivo: <em>app\/views\/user\/create.phtml<\/em><\/p>\n<pre><code class=\"language-php\" data-line=\"\">\n&lt;h1&gt;Crear usuario&lt;\/h1&gt;\n&lt;?= Html::linkAction(&#039;&#039;, &#039;Listar usuarios&#039;, &#039;class=&quot;button&quot;&#039;) ?&gt;\n&lt;?php View::content() ?&gt;\n&lt;?= Form::openMultipart() ?&gt;\n&lt;div class=&quot;row&quot;&gt;\n&nbsp;&nbsp;&nbsp; &lt;div class=&quot;six columns&quot;&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;label for=&quot;user_name&quot;&gt;Nombre&lt;\/label&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;?= Form::text(&#039;user.name&#039;, &#039;class=&quot;u-full-width&quot; required&#039;) ?&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;\n&nbsp;&nbsp;&nbsp; &lt;\/div&gt;&nbsp; &nbsp;\n&lt;\/div&gt;\n&lt;div class=&quot;row&quot;&gt;&nbsp;&nbsp; &nbsp;\n&nbsp;&nbsp;&nbsp; &lt;div class=&quot;six columns&quot;&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;label for=&quot;user_email&quot;&gt;Correo electr\u00f3nico&lt;\/label&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;?= Form::email(&#039;user.email&#039;,&#039;class=&quot;u-full-width&quot; placeholder=&quot;user@mailbox.com&quot;&nbsp; required&#039;) ?&gt;\n&nbsp;&nbsp;&nbsp; &lt;\/div&gt;\n&lt;\/div&gt;\n&lt;div class=&quot;row&quot;&gt;\n&nbsp;&nbsp;&nbsp; &lt;div class=&quot;six columns&quot;&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;label for=&quot;user_age&quot;&gt;Edad&lt;\/label&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;?= Form::number(&#039;user.age&#039;, &#039;required&#039;) ?&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;\n&nbsp;&nbsp;&nbsp; &lt;\/div&gt;&nbsp; &nbsp;\n&lt;\/div&gt;\n&lt;div class=&quot;row&quot;&gt;\n&nbsp;&nbsp;&nbsp; &lt;div class=&quot;six columns&quot;&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;label for=&quot;photo&quot;&gt;Foto de perfil&lt;\/label&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;?= Form::file(&#039;photo&#039;) ?&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;\n&nbsp;&nbsp;&nbsp; &lt;\/div&gt;&nbsp; &nbsp;\n&lt;\/div&gt;\n&lt;input class=&quot;button-primary&quot; value=&quot;Enviar&quot; type=&quot;submit&quot;&gt;\n&lt;?= Form::close() ?&gt;\n<\/code><\/pre>\n<p>Hemos usado el helper <em>Form<\/em> para crear los input de tipo texto, num\u00e9rico y de tipo file. El de tipo file usando el <em>Form::file()<\/em> pas\u00e1ndole como par\u00e1metro la cadena de texto <em>\u00abphoto\u00bb<\/em> para identificar el archivo que estamos subiendo.<\/p>\n<h2>A\u00f1adiendo funcionalidad<\/h2>\n<p>Ahora crearemos la respectiva funci\u00f3n en el controlador que nos cargar\u00e1 esta vista y nos permitir\u00e1 crear un usuario y subir su imagen de perfil:<\/p>\n<p>Archivo: <em>app\/controllers\/user_controller.php<\/em><\/p>\n<pre><code class=\"language-php\" data-line=\"\">\n    public function create()\n&nbsp;&nbsp;&nbsp; {\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; \/\/se verifica si se ha enviado via POST los datos\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if (Input::hasPost(&#039;user&#039;)) {\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; $obj = new User;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; \/\/En caso que falle la operaci\u00f3n de guardar\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if ($obj-&gt;saveWithPhoto(Input::post(&#039;user&#039;))) {\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; \/\/Mensaje de \u00e9xito y retorna al listado\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Flash::valid(&#039;Usuario creado&#039;);\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; return Redirect::to();\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; \/\/Si falla se hacen persistentes los datos en el formulario\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; $this-&gt;data = Input::post(&#039;user&#039;);\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; return;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }\n&nbsp;&nbsp;&nbsp; }<\/code><\/pre>\n<h2>El modelo<\/h2>\n<p>Si lo pudieron notar el modelo <em>User<\/em> tiene un m\u00e9todo llamado <em>saveWithPhoto()<\/em> en el cual hemos encapsulado la l\u00f3gica que nos ha de permtir crear el usuario en la base de datos y subir la imagen al servidor, esto es lo correcto ya que no debe existir l\u00f3gica en el controlador, el controlador debe ser lo m\u00e1s simple posible.<br \/>\nArchivo: <em>app\/models\/user.php<\/em><\/p>\n<pre><code class=\"language-php\" data-line=\"\">\n&lt;?php\n\/**\n * Clase para manejar los datos del usuario, tabla &#039;user&#039;\n *\/\nclass User extends ActiveRecord\n{\n    \/**\n     * Guarda un usuario y sube la foto de un usuario.\n     *\n     * @param array $data Arreglo con los datos de usuario\n     * @return boolean\n     * @throws Exception\n     *\/\n    public function saveWithPhoto($data)\n    {\n        \/\/Inicia la transacci\u00f3n\n        $this-&gt;begin();\n        \/\/Intenta crear el usuario con los datos pasados\n        if ($this-&gt;create($data)) {\n            \/\/Intenta subir y actualizar la foto\n            if ($this-&gt;updatePhoto()) {\n                \/\/Se confirma la transacci\u00f3n\n                $this-&gt;commit();\n                return true;\n            }\n        }\n\n        \/\/Si algo falla se regresa la transacci\u00f3n\n        $this-&gt;rollback();\n        return false;\n    }\n\n    \/**\n     * Sube y actualiza la foto del usuario.\n     *\n     * @return boolean|null\n     *\/\n    public function updatePhoto()\n    {\n        \/\/Intenta subir la foto que viene en el campo &#039;photo&#039;\n        if ($photo = $this-&gt;uploadPhoto(&#039;photo&#039;)) {\n            \/\/Modifica el campo photo del usuario y lo intenta actualizar\n            $this-&gt;photo = $photo;\n            return $this-&gt;update();\n        }\n    }\n\n    \/**\n     * Sube la foto y retorna el nombre del archivo generado.\n     *\n     * @param string $imageField Nombre de archivo recibido por POST\n     * @return string|false\n     *\/\n    public function uploadPhoto($imageField)\n    {\n        \/\/Usamos el adapter &#039;image&#039;\n        $file = Upload::factory($imageField, &#039;image&#039;);\n        \/\/le asignamos las extensiones a permitir\n        $file-&gt;setExtensions(array(&#039;jpg&#039;, &#039;png&#039;, &#039;gif&#039;, &#039;jpeg&#039;));\n        \/\/Intenta subir el archivo\n        if ($file-&gt;isUploaded()) {\n            \/\/Lo guarda usando un nombre de archivo aleatorio y lo retorna.\n            return $file-&gt;saveRandom();\n        }\n        \/\/Si falla al subir\n        return false;\n    }\n}\n<\/code><\/pre>\n<p>No solo hemos creado la funci\u00f3n <em>saveWithPhoto()<\/em>, ya que meter toda esa l\u00f3gica en una sola funci\u00f3n la hace m\u00e1s compleja y dificil de leer. Las otras dos funciones nos permiten tener unas funciones mucho mas cortas, f\u00e1ciles de entender y que se puedan reutilizar. La funci\u00f3n <em>uploadPhoto() <\/em>nos permite subir im\u00e1genes, aunque en este caso solo vamos a subir una sola.<\/p>\n<h2>Ejemplo en funcionamiento<\/h2>\n<p>As\u00ed se ver\u00eda nuestro formulario ingresando a la url <em>user\/create<\/em><\/p>\n<figure id=\"attachment_1271\" aria-describedby=\"caption-attachment-1271\" style=\"width: 600px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/www.kumbiaphp.com\/blog\/wp-content\/uploads\/2017\/03\/form-create-user-kumbiaphp.png\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1271\" src=\"https:\/\/www.kumbiaphp.com\/blog\/wp-content\/uploads\/2017\/03\/form-create-user-kumbiaphp-1024x586.png\" alt=\"Subir im\u00e1genes y datos del usuario\" width=\"600\" height=\"343\" srcset=\"https:\/\/kumbiaphp.com\/blog\/wp-content\/uploads\/2017\/03\/form-create-user-kumbiaphp-1024x586.png 1024w, https:\/\/kumbiaphp.com\/blog\/wp-content\/uploads\/2017\/03\/form-create-user-kumbiaphp-300x172.png 300w, https:\/\/kumbiaphp.com\/blog\/wp-content\/uploads\/2017\/03\/form-create-user-kumbiaphp-768x439.png 768w, https:\/\/kumbiaphp.com\/blog\/wp-content\/uploads\/2017\/03\/form-create-user-kumbiaphp-940x538.png 940w, https:\/\/kumbiaphp.com\/blog\/wp-content\/uploads\/2017\/03\/form-create-user-kumbiaphp.png 1301w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/a><figcaption id=\"caption-attachment-1271\" class=\"wp-caption-text\">Formulario para la creaci\u00f3n de un usuario subiendo imagen de perfil<\/figcaption><\/figure>\n<p>Completando los datos del formulario, seleccionando una imagen de nuestro disco duro y dando clic en el bot\u00f3n <em>Enviar<\/em> hemos creado nuestro primer registro:<\/p>\n<figure id=\"attachment_1280\" aria-describedby=\"caption-attachment-1280\" style=\"width: 600px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/www.kumbiaphp.com\/blog\/wp-content\/uploads\/2017\/03\/Captura-de-pantalla-2017-03-27-a-las-13.40.30.png\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1280\" src=\"https:\/\/www.kumbiaphp.com\/blog\/wp-content\/uploads\/2017\/03\/Captura-de-pantalla-2017-03-27-a-las-13.40.30-1024x654.png\" alt=\"Lista de usuarios creados\" width=\"600\" height=\"343\"><\/a><figcaption id=\"caption-attachment-1280\" class=\"wp-caption-text\">Lista de usuarios creados<\/figcaption><\/figure>\n<p>Podemos crear un formulario solo para actualizar la foto de perfil y otro para editar los datos como las siguientes:<\/p>\n<figure id=\"attachment_1281\" aria-describedby=\"caption-attachment-1281\" style=\"width: 600px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/www.kumbiaphp.com\/blog\/wp-content\/uploads\/2017\/03\/Captura-de-pantalla-2017-03-27-a-las-13.47.22.png\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1281\" src=\"https:\/\/www.kumbiaphp.com\/blog\/wp-content\/uploads\/2017\/03\/Captura-de-pantalla-2017-03-27-a-las-13.47.22-1024x654.png\" alt=\"Actualizar foto de perfil\" width=\"600\" height=\"343\"><\/a><figcaption id=\"caption-attachment-1281\" class=\"wp-caption-text\">Actualizar foto de perfil<\/figcaption><\/figure>\n<figure id=\"attachment_1282\" aria-describedby=\"caption-attachment-1282\" style=\"width: 600px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/www.kumbiaphp.com\/blog\/wp-content\/uploads\/2017\/03\/Captura-de-pantalla-2017-03-27-a-las-13.51.45.png\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1282\" src=\"https:\/\/www.kumbiaphp.com\/blog\/wp-content\/uploads\/2017\/03\/Captura-de-pantalla-2017-03-27-a-las-13.51.45-1024x654.png\" alt=\"Editar datos del usuario\" width=\"600\" height=\"343\"><\/a><figcaption id=\"caption-attachment-1282\" class=\"wp-caption-text\">Editar datos del usuario<\/figcaption><\/figure>\n<h2>Ver y descargar c\u00f3digo completo<\/h2>\n<p>En el siguiente enlace puedes ver el repositorio con el c\u00f3digo fuente para subir im\u00e1genes y datos: <a href=\"https:\/\/github.com\/henrystivens\/upload-image-and-data\">https:\/\/github.com\/henrystivens\/upload-image-and-data <\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u00a1Hola Kumbieros! Hoy les traigo un tutorial b\u00e1sico para quienes deseen conocer como subir im\u00e1genes y datos con el&hellip;<\/p>\n","protected":false},"author":11,"featured_media":1281,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_crdt_document":"","inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1,9],"tags":[36],"class_list":["post-1260","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-php","category-tutoriales-y-screencast","tag-ejemplos"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.2 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Subir im\u00e1genes y datos con el mismo formulario html - KumbiaPHP Framework PHP en espa\u00f1ol<\/title>\n<meta name=\"description\" content=\"Tutorial b\u00e1sico que nos permitir\u00e1 conocer como subir im\u00e1genes y datos con el mismo formulario html, de manera simple y r\u00e1pida. Uso de la librer\u00eda Upload.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kumbiaphp.com\/blog\/2017\/03\/27\/subir-imagen-y-datos-con-kumbiaphp\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Subir im\u00e1genes y datos con el mismo formulario html - KumbiaPHP Framework PHP en espa\u00f1ol\" \/>\n<meta property=\"og:description\" content=\"Tutorial b\u00e1sico que nos permitir\u00e1 conocer como subir im\u00e1genes y datos con el mismo formulario html, de manera simple y r\u00e1pida. Uso de la librer\u00eda Upload.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kumbiaphp.com\/blog\/2017\/03\/27\/subir-imagen-y-datos-con-kumbiaphp\/\" \/>\n<meta property=\"og:site_name\" content=\"KumbiaPHP Framework PHP en espa\u00f1ol\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kumbia.fw\" \/>\n<meta property=\"article:published_time\" content=\"2017-03-27T19:06:34+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-09-02T16:51:21+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kumbiaphp.com\/blog\/wp-content\/uploads\/2017\/03\/Captura-de-pantalla-2017-03-27-a-las-13.47.22.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1392\" \/>\n\t<meta property=\"og:image:height\" content=\"889\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"HenryStivens\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@henrystivens\" \/>\n<meta name=\"twitter:site\" content=\"@kumbiaphp\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"HenryStivens\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kumbiaphp.com\/blog\/2017\/03\/27\/subir-imagen-y-datos-con-kumbiaphp\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kumbiaphp.com\/blog\/2017\/03\/27\/subir-imagen-y-datos-con-kumbiaphp\/\"},\"author\":{\"name\":\"HenryStivens\",\"@id\":\"https:\/\/kumbiaphp.com\/blog\/#\/schema\/person\/b6f7cc13b1eaec9ae9e243b4385fc321\"},\"headline\":\"Subir im\u00e1genes y datos con el mismo formulario html\",\"datePublished\":\"2017-03-27T19:06:34+00:00\",\"dateModified\":\"2020-09-02T16:51:21+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kumbiaphp.com\/blog\/2017\/03\/27\/subir-imagen-y-datos-con-kumbiaphp\/\"},\"wordCount\":662,\"commentCount\":6,\"publisher\":{\"@id\":\"https:\/\/kumbiaphp.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/kumbiaphp.com\/blog\/2017\/03\/27\/subir-imagen-y-datos-con-kumbiaphp\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kumbiaphp.com\/blog\/wp-content\/uploads\/2017\/03\/Captura-de-pantalla-2017-03-27-a-las-13.47.22.png\",\"keywords\":[\"ejemplos\"],\"articleSection\":[\"PHP\",\"Tutoriales y screencast\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kumbiaphp.com\/blog\/2017\/03\/27\/subir-imagen-y-datos-con-kumbiaphp\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kumbiaphp.com\/blog\/2017\/03\/27\/subir-imagen-y-datos-con-kumbiaphp\/\",\"url\":\"https:\/\/kumbiaphp.com\/blog\/2017\/03\/27\/subir-imagen-y-datos-con-kumbiaphp\/\",\"name\":\"Subir im\u00e1genes y datos con el mismo formulario html - KumbiaPHP Framework PHP en espa\u00f1ol\",\"isPartOf\":{\"@id\":\"https:\/\/kumbiaphp.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kumbiaphp.com\/blog\/2017\/03\/27\/subir-imagen-y-datos-con-kumbiaphp\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kumbiaphp.com\/blog\/2017\/03\/27\/subir-imagen-y-datos-con-kumbiaphp\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kumbiaphp.com\/blog\/wp-content\/uploads\/2017\/03\/Captura-de-pantalla-2017-03-27-a-las-13.47.22.png\",\"datePublished\":\"2017-03-27T19:06:34+00:00\",\"dateModified\":\"2020-09-02T16:51:21+00:00\",\"description\":\"Tutorial b\u00e1sico que nos permitir\u00e1 conocer como subir im\u00e1genes y datos con el mismo formulario html, de manera simple y r\u00e1pida. Uso de la librer\u00eda Upload.\",\"breadcrumb\":{\"@id\":\"https:\/\/kumbiaphp.com\/blog\/2017\/03\/27\/subir-imagen-y-datos-con-kumbiaphp\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kumbiaphp.com\/blog\/2017\/03\/27\/subir-imagen-y-datos-con-kumbiaphp\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kumbiaphp.com\/blog\/2017\/03\/27\/subir-imagen-y-datos-con-kumbiaphp\/#primaryimage\",\"url\":\"https:\/\/kumbiaphp.com\/blog\/wp-content\/uploads\/2017\/03\/Captura-de-pantalla-2017-03-27-a-las-13.47.22.png\",\"contentUrl\":\"https:\/\/kumbiaphp.com\/blog\/wp-content\/uploads\/2017\/03\/Captura-de-pantalla-2017-03-27-a-las-13.47.22.png\",\"width\":1392,\"height\":889,\"caption\":\"Actualizar foto de perfil\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kumbiaphp.com\/blog\/2017\/03\/27\/subir-imagen-y-datos-con-kumbiaphp\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/kumbiaphp.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Subir im\u00e1genes y datos con el mismo formulario html\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kumbiaphp.com\/blog\/#website\",\"url\":\"https:\/\/kumbiaphp.com\/blog\/\",\"name\":\"KumbiaPHP Framework PHP en espa\u00f1ol\",\"description\":\"Web &amp; app MVC PHP framework\",\"publisher\":{\"@id\":\"https:\/\/kumbiaphp.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kumbiaphp.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kumbiaphp.com\/blog\/#organization\",\"name\":\"KumbiaPHP Framework PHP en espa\u00f1ol\",\"url\":\"https:\/\/kumbiaphp.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kumbiaphp.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kumbiaphp.com\/blog\/wp-content\/uploads\/2015\/02\/logo.png\",\"contentUrl\":\"https:\/\/kumbiaphp.com\/blog\/wp-content\/uploads\/2015\/02\/logo.png\",\"width\":432,\"height\":50,\"caption\":\"KumbiaPHP Framework PHP en espa\u00f1ol\"},\"image\":{\"@id\":\"https:\/\/kumbiaphp.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kumbia.fw\",\"https:\/\/x.com\/kumbiaphp\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kumbiaphp.com\/blog\/#\/schema\/person\/b6f7cc13b1eaec9ae9e243b4385fc321\",\"name\":\"HenryStivens\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/secure.gravatar.com\/avatar\/b72eb6560d7b6068354db3428a9585f4c18759e8a799af6f27a508078457e256?s=96&d=mm&r=g\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b72eb6560d7b6068354db3428a9585f4c18759e8a799af6f27a508078457e256?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b72eb6560d7b6068354db3428a9585f4c18759e8a799af6f27a508078457e256?s=96&d=mm&r=g\",\"caption\":\"HenryStivens\"},\"description\":\"Dedicated to building robust, user-centered software solutions with clean, maintainable code. Passionate about innovative technology, gaming, and gourmet coffee.\",\"sameAs\":[\"https:\/\/x.com\/henrystivens\"],\"url\":\"https:\/\/kumbiaphp.com\/blog\/author\/henrystivens\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Subir im\u00e1genes y datos con el mismo formulario html - KumbiaPHP Framework PHP en espa\u00f1ol","description":"Tutorial b\u00e1sico que nos permitir\u00e1 conocer como subir im\u00e1genes y datos con el mismo formulario html, de manera simple y r\u00e1pida. Uso de la librer\u00eda Upload.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kumbiaphp.com\/blog\/2017\/03\/27\/subir-imagen-y-datos-con-kumbiaphp\/","og_locale":"es_ES","og_type":"article","og_title":"Subir im\u00e1genes y datos con el mismo formulario html - KumbiaPHP Framework PHP en espa\u00f1ol","og_description":"Tutorial b\u00e1sico que nos permitir\u00e1 conocer como subir im\u00e1genes y datos con el mismo formulario html, de manera simple y r\u00e1pida. Uso de la librer\u00eda Upload.","og_url":"https:\/\/kumbiaphp.com\/blog\/2017\/03\/27\/subir-imagen-y-datos-con-kumbiaphp\/","og_site_name":"KumbiaPHP Framework PHP en espa\u00f1ol","article_publisher":"https:\/\/www.facebook.com\/kumbia.fw","article_published_time":"2017-03-27T19:06:34+00:00","article_modified_time":"2020-09-02T16:51:21+00:00","og_image":[{"width":1392,"height":889,"url":"https:\/\/kumbiaphp.com\/blog\/wp-content\/uploads\/2017\/03\/Captura-de-pantalla-2017-03-27-a-las-13.47.22.png","type":"image\/png"}],"author":"HenryStivens","twitter_card":"summary_large_image","twitter_creator":"@henrystivens","twitter_site":"@kumbiaphp","twitter_misc":{"Escrito por":"HenryStivens","Tiempo de lectura":"8 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kumbiaphp.com\/blog\/2017\/03\/27\/subir-imagen-y-datos-con-kumbiaphp\/#article","isPartOf":{"@id":"https:\/\/kumbiaphp.com\/blog\/2017\/03\/27\/subir-imagen-y-datos-con-kumbiaphp\/"},"author":{"name":"HenryStivens","@id":"https:\/\/kumbiaphp.com\/blog\/#\/schema\/person\/b6f7cc13b1eaec9ae9e243b4385fc321"},"headline":"Subir im\u00e1genes y datos con el mismo formulario html","datePublished":"2017-03-27T19:06:34+00:00","dateModified":"2020-09-02T16:51:21+00:00","mainEntityOfPage":{"@id":"https:\/\/kumbiaphp.com\/blog\/2017\/03\/27\/subir-imagen-y-datos-con-kumbiaphp\/"},"wordCount":662,"commentCount":6,"publisher":{"@id":"https:\/\/kumbiaphp.com\/blog\/#organization"},"image":{"@id":"https:\/\/kumbiaphp.com\/blog\/2017\/03\/27\/subir-imagen-y-datos-con-kumbiaphp\/#primaryimage"},"thumbnailUrl":"https:\/\/kumbiaphp.com\/blog\/wp-content\/uploads\/2017\/03\/Captura-de-pantalla-2017-03-27-a-las-13.47.22.png","keywords":["ejemplos"],"articleSection":["PHP","Tutoriales y screencast"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kumbiaphp.com\/blog\/2017\/03\/27\/subir-imagen-y-datos-con-kumbiaphp\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kumbiaphp.com\/blog\/2017\/03\/27\/subir-imagen-y-datos-con-kumbiaphp\/","url":"https:\/\/kumbiaphp.com\/blog\/2017\/03\/27\/subir-imagen-y-datos-con-kumbiaphp\/","name":"Subir im\u00e1genes y datos con el mismo formulario html - KumbiaPHP Framework PHP en espa\u00f1ol","isPartOf":{"@id":"https:\/\/kumbiaphp.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kumbiaphp.com\/blog\/2017\/03\/27\/subir-imagen-y-datos-con-kumbiaphp\/#primaryimage"},"image":{"@id":"https:\/\/kumbiaphp.com\/blog\/2017\/03\/27\/subir-imagen-y-datos-con-kumbiaphp\/#primaryimage"},"thumbnailUrl":"https:\/\/kumbiaphp.com\/blog\/wp-content\/uploads\/2017\/03\/Captura-de-pantalla-2017-03-27-a-las-13.47.22.png","datePublished":"2017-03-27T19:06:34+00:00","dateModified":"2020-09-02T16:51:21+00:00","description":"Tutorial b\u00e1sico que nos permitir\u00e1 conocer como subir im\u00e1genes y datos con el mismo formulario html, de manera simple y r\u00e1pida. Uso de la librer\u00eda Upload.","breadcrumb":{"@id":"https:\/\/kumbiaphp.com\/blog\/2017\/03\/27\/subir-imagen-y-datos-con-kumbiaphp\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kumbiaphp.com\/blog\/2017\/03\/27\/subir-imagen-y-datos-con-kumbiaphp\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kumbiaphp.com\/blog\/2017\/03\/27\/subir-imagen-y-datos-con-kumbiaphp\/#primaryimage","url":"https:\/\/kumbiaphp.com\/blog\/wp-content\/uploads\/2017\/03\/Captura-de-pantalla-2017-03-27-a-las-13.47.22.png","contentUrl":"https:\/\/kumbiaphp.com\/blog\/wp-content\/uploads\/2017\/03\/Captura-de-pantalla-2017-03-27-a-las-13.47.22.png","width":1392,"height":889,"caption":"Actualizar foto de perfil"},{"@type":"BreadcrumbList","@id":"https:\/\/kumbiaphp.com\/blog\/2017\/03\/27\/subir-imagen-y-datos-con-kumbiaphp\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/kumbiaphp.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Subir im\u00e1genes y datos con el mismo formulario html"}]},{"@type":"WebSite","@id":"https:\/\/kumbiaphp.com\/blog\/#website","url":"https:\/\/kumbiaphp.com\/blog\/","name":"KumbiaPHP Framework PHP en espa\u00f1ol","description":"Web &amp; app MVC PHP framework","publisher":{"@id":"https:\/\/kumbiaphp.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kumbiaphp.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/kumbiaphp.com\/blog\/#organization","name":"KumbiaPHP Framework PHP en espa\u00f1ol","url":"https:\/\/kumbiaphp.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kumbiaphp.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/kumbiaphp.com\/blog\/wp-content\/uploads\/2015\/02\/logo.png","contentUrl":"https:\/\/kumbiaphp.com\/blog\/wp-content\/uploads\/2015\/02\/logo.png","width":432,"height":50,"caption":"KumbiaPHP Framework PHP en espa\u00f1ol"},"image":{"@id":"https:\/\/kumbiaphp.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kumbia.fw","https:\/\/x.com\/kumbiaphp"]},{"@type":"Person","@id":"https:\/\/kumbiaphp.com\/blog\/#\/schema\/person\/b6f7cc13b1eaec9ae9e243b4385fc321","name":"HenryStivens","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/secure.gravatar.com\/avatar\/b72eb6560d7b6068354db3428a9585f4c18759e8a799af6f27a508078457e256?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/b72eb6560d7b6068354db3428a9585f4c18759e8a799af6f27a508078457e256?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b72eb6560d7b6068354db3428a9585f4c18759e8a799af6f27a508078457e256?s=96&d=mm&r=g","caption":"HenryStivens"},"description":"Dedicated to building robust, user-centered software solutions with clean, maintainable code. Passionate about innovative technology, gaming, and gourmet coffee.","sameAs":["https:\/\/x.com\/henrystivens"],"url":"https:\/\/kumbiaphp.com\/blog\/author\/henrystivens\/"}]}},"jetpack_featured_media_url":"https:\/\/kumbiaphp.com\/blog\/wp-content\/uploads\/2017\/03\/Captura-de-pantalla-2017-03-27-a-las-13.47.22.png","jetpack_sharing_enabled":true,"jetpack-related-posts":[],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/kumbiaphp.com\/blog\/wp-json\/wp\/v2\/posts\/1260","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kumbiaphp.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kumbiaphp.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kumbiaphp.com\/blog\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/kumbiaphp.com\/blog\/wp-json\/wp\/v2\/comments?post=1260"}],"version-history":[{"count":29,"href":"https:\/\/kumbiaphp.com\/blog\/wp-json\/wp\/v2\/posts\/1260\/revisions"}],"predecessor-version":[{"id":2554,"href":"https:\/\/kumbiaphp.com\/blog\/wp-json\/wp\/v2\/posts\/1260\/revisions\/2554"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kumbiaphp.com\/blog\/wp-json\/wp\/v2\/media\/1281"}],"wp:attachment":[{"href":"https:\/\/kumbiaphp.com\/blog\/wp-json\/wp\/v2\/media?parent=1260"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kumbiaphp.com\/blog\/wp-json\/wp\/v2\/categories?post=1260"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kumbiaphp.com\/blog\/wp-json\/wp\/v2\/tags?post=1260"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}