{"id":7001,"date":"2018-10-04T08:11:51","date_gmt":"2018-10-04T08:11:51","guid":{"rendered":"https:\/\/www.jose-aguilar.com\/blog\/?p=7001"},"modified":"2018-10-04T08:11:51","modified_gmt":"2018-10-04T08:11:51","slug":"como-subir-una-imagen-con-jquery-ajax-php","status":"publish","type":"post","link":"https:\/\/www.jose-aguilar.com\/blog\/como-subir-una-imagen-con-jquery-ajax-php\/","title":{"rendered":"Como subir una imagen con jQuery, Ajax y PHP"},"content":{"rendered":"

En este art\u00edculo vamos a explicar como\u00a0permitir al usuario subir una imagen al servidor con jQuery<\/strong>, Ajax<\/strong> y PHP<\/strong> sin necesidad de recargar la p\u00e1gina y sin utilizar plugins de terceros.<\/p>\n

En el ejemplo en funcionamiento tenemos un formulario que contiene un imagen, el campo para seleccionar un archivo y un bot\u00f3n para realizar la subida. El usuario puede subir una imagen en formato png, jpg o gif. La imagen es cargada al servidor y se pre visualiza en pantalla sin recargar la p\u00e1gina despu\u00e9s de pulsar el bot\u00f3n \u00abSubir\u00bb.<\/p>\n

\u00bfC\u00f3mo lo conseguimos?<\/p>\n

Hace tiempo andaba buscando un c\u00f3digo como este que simplifique mucho el proceso, usando menos recursos y con un efecto similar. Resulta que es muy sencillo. Lo vamos a explicar utilizando el ejemplo que hemos creado para este tutorial.<\/p>\n

Aspecto visual o dise\u00f1o<\/h2>\n

La interfaz o aspecto visual es el siguiente:<\/p>\n

\"\"<\/a><\/p>\n

Conseguido sin mucho esfuerzo gracias a la tecnolog\u00eda Bootstrap 4<\/strong>.<\/p>\n

C\u00f3digo JavaScript necesario<\/h2>\n

En la cabecera o dentro de la etiqueta <head> de tu p\u00e1gina tienes que agregar la librer\u00eda jQuery<\/strong> y la llamada al evento:<\/p>\n

<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<<\/span>script src=<\/span>"https:\/\/code.jquery.com\/jquery-3.2.1.js"<\/span>><\/<\/span>script><\/span>\n<<\/span>script><\/span>\n$(<\/span>document)<\/span>.ready<\/span>(<\/span>function<\/span>(<\/span>)<\/span> {<\/span>\n    $(<\/span>".upload"<\/span>)<\/span>.on<\/span>(<\/span>'click'<\/span>,<\/span> function<\/span>(<\/span>)<\/span> {<\/span>\n        var<\/span> formData =<\/span> new<\/span> FormData(<\/span>)<\/span>;<\/span>\n        var<\/span> files =<\/span> $(<\/span>'#image'<\/span>)<\/span>[<\/span>0]<\/span>.files<\/span>[<\/span>0]<\/span>;<\/span>\n        formData.append<\/span>(<\/span>'file'<\/span>,<\/span>files)<\/span>;<\/span>\n        $.ajax<\/span>(<\/span>{<\/span>\n            url:<\/span> 'upload.php'<\/span>,<\/span>\n            type:<\/span> 'post'<\/span>,<\/span>\n            data:<\/span> formData,<\/span>\n            contentType:<\/span> false<\/span>,<\/span>\n            processData:<\/span> false<\/span>,<\/span>\n            success:<\/span> function<\/span>(<\/span>response)<\/span> {<\/span>\n                if<\/span> (<\/span>response !=<\/span> 0<\/span>)<\/span> {<\/span>\n                    $(<\/span>".card-img-top"<\/span>)<\/span>.attr<\/span>(<\/span>"src"<\/span>,<\/span> response)<\/span>;<\/span>\n                }<\/span> else<\/span> {<\/span>\n                    alert<\/span>(<\/span>'Formato de imagen incorrecto.'<\/span>)<\/span>;<\/span>\n                }<\/span>\n            }<\/span>\n        }<\/span>)<\/span>;<\/span>\n        return<\/span> false<\/span>;<\/span>\n    }<\/span>)<\/span>;<\/span>\n}<\/span>)<\/span>;<\/span>\n<\/<\/span>script><\/span><\/pre><\/div><\/div>\n
El c\u00f3digo anterior tambi\u00e9n puede estar incrustado justo antes de la etiqueta de cierre <\/body>.<\/p>\n
Tan solo estamos esperando a que se haga click en el bot\u00f3n que contiene la clase \u00abupload\u00bb para obtener el archivo seleccionado desde el ordenador para pasarlo al archivo \u00abupload.php\u00bb para que pueda ser procesado en el servidor. Una vez se ha proceso la imagen en el servidor, si la respuesta es diferente de 0, el atributo src de nuestra imagen se cambiar\u00e1 por la respuesta. En caso contrario mostrar un alerta de error.<\/p>\n
La clave del asunto est\u00e1 en la utilizaci\u00f3n de la clase FormData<\/strong>.<\/p>\n
Los objetos FormData<\/strong> permiten compilar un conjunto de pares clave\/valor para enviar mediante XMLHttpRequest<\/strong>. Est\u00e1n destinados principalmente para el env\u00edo de los datos del formulario, pero se pueden utilizar de forma independiente con el fin de transmitir los datos tecleados. Los datos transmitidos estar\u00e1n en el mismo formato que usa el m\u00e9todo submit() del formulario para enviar los datos si el tipo de codificaci\u00f3n del formulario se establece en \u00abmultipart\/form-data\u00bb.<\/p>\n
En el ejemplo estamos creando un objeto de tipo FormData<\/strong> para agregarle la imagen. El objeto FormData<\/strong> se lo pasamos al archivo PHP<\/strong> mediante la t\u00e9cnica Ajax<\/strong>. De esta forma, en el archivo PHP<\/strong> tendremos la informaci\u00f3n necesaria para procesar la imagen.<\/p>\n
Este c\u00f3digo tambi\u00e9n puede ser \u00fatil para subir otro tipo de archivos, tan solo realizando algunos ajustes.<\/p>\n
C\u00f3digo HTML que debes a\u00f1adir dentro del body de tu p\u00e1gina<\/h2>\n
En el cuerpo o dentro de la etiqueta <body> agregamos el formulario que permite subir archivos:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<form<\/span><\/a> method<\/span>=<\/span>"post"<\/span> action<\/span>=<\/span>"#"<\/span> enctype<\/span>=<\/span>"multipart\/form-data"<\/span>><\/span>\n    <div<\/span><\/a> class<\/span>=<\/span>"card"<\/span> style<\/span>=<\/span>"width: 18rem;"<\/span>><\/span>\n        <img<\/span><\/a> class<\/span>=<\/span>"card-img-top"<\/span> src<\/span>=<\/span>"images\/default-avatar.png"<\/span>><\/span>\n        <div<\/span><\/a> class<\/span>=<\/span>"card-body"<\/span>><\/span>\n            <h5<\/span><\/a> class<\/span>=<\/span>"card-title"<\/span>><\/span>Sube una foto<\/<\/span>h5<\/span><\/a>><\/span>\n            <p<\/span><\/a> class<\/span>=<\/span>"card-text"<\/span>><\/span>Sube una imagen...<\/<\/span>p<\/span><\/a>><\/span>\n            <div<\/span><\/a> class<\/span>=<\/span>"form-group"<\/span>><\/span>\n                <label<\/span><\/a> for<\/span>=<\/span>"image"<\/span>><\/span>Nueva imagen<\/<\/span>label<\/span><\/a>><\/span>\n                <input<\/span><\/a> type<\/span>=<\/span>"file"<\/span> class<\/span>=<\/span>"form-control-file"<\/span> name<\/span>=<\/span>"image"<\/span> id<\/span>=<\/span>"image"<\/span>><\/span>\n            <\/<\/span>div<\/span><\/a>><\/span>\n            <input<\/span><\/a> type<\/span>=<\/span>"button"<\/span> class<\/span>=<\/span>"btn btn-primary upload"<\/span> value<\/span>=<\/span>"Subir"<\/span>><\/span>\n        <\/<\/span>div<\/span><\/a>><\/span>\n    <\/<\/span>div<\/span><\/a>><\/span>\n<\/<\/span>form<\/span><\/a>><\/span><\/pre><\/div><\/div>\n
Se trata de un formulario simple que utiliza el atributo\u00a0enctype=\u00bbmultipart\/form-data\u00bb\u00a0<\/em>para permitir la subida de archivos y se apoya de la tecnolog\u00eda Bootstrap<\/strong> para el dise\u00f1o. Tan solo tenemos una imagen por defecto, el campo para seleccionar una imagen desde el ordenador y un bot\u00f3n que permite realizar la acci\u00f3n de subida al servidor.<\/p>\n
C\u00f3digo PHP que se ejecuta en el servidor<\/h2>\n
El arhivo \u00abupload.php\u00bb que usamos para procesar la imagen contiene lo siguiente:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<?php<\/span>\nif<\/span> (<\/span>(<\/span>$_FILES<\/span>[<\/span>"file"<\/span>]<\/span>[<\/span>"type"<\/span>]<\/span> ==<\/span> "image\/pjpeg"<\/span>)<\/span>\n    ||<\/span> (<\/span>$_FILES<\/span>[<\/span>"file"<\/span>]<\/span>[<\/span>"type"<\/span>]<\/span> ==<\/span> "image\/jpeg"<\/span>)<\/span>\n    ||<\/span> (<\/span>$_FILES<\/span>[<\/span>"file"<\/span>]<\/span>[<\/span>"type"<\/span>]<\/span> ==<\/span> "image\/png"<\/span>)<\/span>\n    ||<\/span> (<\/span>$_FILES<\/span>[<\/span>"file"<\/span>]<\/span>[<\/span>"type"<\/span>]<\/span> ==<\/span> "image\/gif"<\/span>)<\/span>)<\/span> {<\/span>\n    if<\/span> (<\/span>move_uploaded_file<\/span><\/a>(<\/span>$_FILES<\/span>[<\/span>"file"<\/span>]<\/span>[<\/span>"tmp_name"<\/span>]<\/span>,<\/span> "images\/"<\/span>.<\/span>$_FILES<\/span>[<\/span>'file'<\/span>]<\/span>[<\/span>'name'<\/span>]<\/span>)<\/span>)<\/span> {<\/span>\n        \/\/more code here...<\/span>\n        echo<\/span> "images\/"<\/span>.<\/span>$_FILES<\/span>[<\/span>'file'<\/span>]<\/span>[<\/span>'name'<\/span>]<\/span>;<\/span>\n    }<\/span> else<\/span> {<\/span>\n        echo<\/span> 0<\/span>;<\/span>\n    }<\/span>\n}<\/span> else<\/span> {<\/span>\n    echo<\/span> 0<\/span>;<\/span>\n}<\/span><\/pre><\/div><\/div>\n
Simplemente comprobamos que el archivo que se est\u00e1 intentando subir sea del tipo adecuado. En este caso, solo queremos que se puedan subir im\u00e1genes .png, .jpg o .gif y, seguidamente, usamos la funci\u00f3n move_uploaded_file()<\/em> de PHP<\/strong> para depositar el archivo seleccionado en el lugar que deseamos. Lo guardamos con el mismo nombre de subida.<\/p>\n
Despu\u00e9s de esta acci\u00f3n se podr\u00edan hacer muchos m\u00e1s procesos, como por ejemplo registrar algo en la base de datos o enviar un email. Recuerda que todo esto se puede hacer sin recargar la p\u00e1gina.<\/p>\n
Como respuesta usamos la funci\u00f3n echo de PHP<\/strong> para retornar un 0 en caso de error o la ruta del archivo subido para depositarlo en el src tal y como puedes ver en el success de la llamada Ajax<\/strong>.<\/p>\n
Conclusiones<\/h2>\n
El efecto que conseguimos con este c\u00f3digo de ejemplo se puede conseguir con infinidad de plugins de terceros que andan rondando por la Web pero, pensamos que este c\u00f3digo puede resultar muy \u00fatil en casos extremos en los que sea necesario utilizar los menos recursos posibles para hacerlo funcionar o en casos que se necesite algo simple para permitir al usuario subir una imagen. El caso es que los plugins de terceros suelen tener infinidad de opciones que finalmente no se utilizan, lo que los hace muy complejos y grandes en tama\u00f1o para tenerlos depositados en el servidor.<\/p>\n
<\/i> Ver demo<\/a> <\/i> Descargar<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Tutorial y c\u00f3digo de ejemplo que permite al usuario subir una imagen al servidor con jQuery, Ajax y PHP sin necesidad de recargar la p\u00e1gina y sin utilizar plugins de terceros.<\/p>\n","protected":false},"author":1,"featured_media":7004,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[31,5,3],"tags":[84,110],"class_list":["post-7001","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ajax","category-jquery","category-php","tag-formularios","tag-imagenes"],"yoast_head":"\nComo subir una imagen con jQuery, Ajax y PHP - Jose Aguilar Blog<\/title>\n<meta name=\"description\" content=\"Tutorial y c\u00f3digo de ejemplo que permite al usuario subir una imagen al servidor con jQuery, Ajax y PHP sin necesidad de recargar la p\u00e1gina y sin utilizar plugins de terceros.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Como subir una imagen con jQuery, Ajax y PHP - Jose Aguilar Blog\" \/>\n<meta property=\"og:description\" content=\"Tutorial y c\u00f3digo de ejemplo que permite al usuario subir una imagen al servidor con jQuery, Ajax y PHP sin necesidad de recargar la p\u00e1gina y sin utilizar plugins de terceros.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jose-aguilar.com\/blog\/como-subir-una-imagen-con-jquery-ajax-php\/\" \/>\n<meta property=\"og:site_name\" content=\"Jose Aguilar Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/joseaguilarblog\" \/>\n<meta property=\"article:published_time\" content=\"2018-10-04T08:11:51+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2018\/10\/sube-tu-foto-ajax-bootstrap-featured.png\" \/>\n\t<meta property=\"og:image:width\" content=\"313\" \/>\n\t<meta property=\"og:image:height\" content=\"349\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Jose Aguilar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:site\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jose Aguilar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/como-subir-una-imagen-con-jquery-ajax-php\/\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/como-subir-una-imagen-con-jquery-ajax-php\/\",\"name\":\"Como subir una imagen con jQuery, Ajax y PHP - Jose Aguilar Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/como-subir-una-imagen-con-jquery-ajax-php\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/como-subir-una-imagen-con-jquery-ajax-php\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2018\/10\/sube-tu-foto-ajax-bootstrap-featured.png\",\"datePublished\":\"2018-10-04T08:11:51+00:00\",\"author\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\"},\"description\":\"Tutorial y c\u00f3digo de ejemplo que permite al usuario subir una imagen al servidor con jQuery, Ajax y PHP sin necesidad de recargar la p\u00e1gina y sin utilizar plugins de terceros.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/como-subir-una-imagen-con-jquery-ajax-php\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jose-aguilar.com\/blog\/como-subir-una-imagen-con-jquery-ajax-php\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/como-subir-una-imagen-con-jquery-ajax-php\/#primaryimage\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2018\/10\/sube-tu-foto-ajax-bootstrap-featured.png\",\"contentUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2018\/10\/sube-tu-foto-ajax-bootstrap-featured.png\",\"width\":313,\"height\":349},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/como-subir-una-imagen-con-jquery-ajax-php\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.jose-aguilar.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Como subir una imagen con jQuery, Ajax y PHP\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/\",\"name\":\"Jose Aguilar Blog\",\"description\":\"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\",\"name\":\"Jose Aguilar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"caption\":\"Jose Aguilar\"},\"description\":\"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.\",\"sameAs\":[\"https:\/\/plus.google.com\/114357189801512615537\"],\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Como subir una imagen con jQuery, Ajax y PHP - Jose Aguilar Blog","description":"Tutorial y c\u00f3digo de ejemplo que permite al usuario subir una imagen al servidor con jQuery, Ajax y PHP sin necesidad de recargar la p\u00e1gina y sin utilizar plugins de terceros.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"es_ES","og_type":"article","og_title":"Como subir una imagen con jQuery, Ajax y PHP - Jose Aguilar Blog","og_description":"Tutorial y c\u00f3digo de ejemplo que permite al usuario subir una imagen al servidor con jQuery, Ajax y PHP sin necesidad de recargar la p\u00e1gina y sin utilizar plugins de terceros.","og_url":"https:\/\/www.jose-aguilar.com\/blog\/como-subir-una-imagen-con-jquery-ajax-php\/","og_site_name":"Jose Aguilar Blog","article_publisher":"https:\/\/www.facebook.com\/joseaguilarblog","article_published_time":"2018-10-04T08:11:51+00:00","og_image":[{"width":313,"height":349,"url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2018\/10\/sube-tu-foto-ajax-bootstrap-featured.png","type":"image\/png"}],"author":"Jose Aguilar","twitter_card":"summary_large_image","twitter_creator":"@JoseAguilarBlog","twitter_site":"@JoseAguilarBlog","twitter_misc":{"Escrito por":"Jose Aguilar","Tiempo de lectura":"5 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jose-aguilar.com\/blog\/como-subir-una-imagen-con-jquery-ajax-php\/","url":"https:\/\/www.jose-aguilar.com\/blog\/como-subir-una-imagen-con-jquery-ajax-php\/","name":"Como subir una imagen con jQuery, Ajax y PHP - Jose Aguilar Blog","isPartOf":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/como-subir-una-imagen-con-jquery-ajax-php\/#primaryimage"},"image":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/como-subir-una-imagen-con-jquery-ajax-php\/#primaryimage"},"thumbnailUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2018\/10\/sube-tu-foto-ajax-bootstrap-featured.png","datePublished":"2018-10-04T08:11:51+00:00","author":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11"},"description":"Tutorial y c\u00f3digo de ejemplo que permite al usuario subir una imagen al servidor con jQuery, Ajax y PHP sin necesidad de recargar la p\u00e1gina y sin utilizar plugins de terceros.","breadcrumb":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/como-subir-una-imagen-con-jquery-ajax-php\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jose-aguilar.com\/blog\/como-subir-una-imagen-con-jquery-ajax-php\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/como-subir-una-imagen-con-jquery-ajax-php\/#primaryimage","url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2018\/10\/sube-tu-foto-ajax-bootstrap-featured.png","contentUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2018\/10\/sube-tu-foto-ajax-bootstrap-featured.png","width":313,"height":349},{"@type":"BreadcrumbList","@id":"https:\/\/www.jose-aguilar.com\/blog\/como-subir-una-imagen-con-jquery-ajax-php\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.jose-aguilar.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Como subir una imagen con jQuery, Ajax y PHP"}]},{"@type":"WebSite","@id":"https:\/\/www.jose-aguilar.com\/blog\/#website","url":"https:\/\/www.jose-aguilar.com\/blog\/","name":"Jose Aguilar Blog","description":"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11","name":"Jose Aguilar","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","caption":"Jose Aguilar"},"description":"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.","sameAs":["https:\/\/plus.google.com\/114357189801512615537"],"url":"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/"}]}},"_links":{"self":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/7001","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/comments?post=7001"}],"version-history":[{"count":0,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/7001\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media\/7004"}],"wp:attachment":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media?parent=7001"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/categories?post=7001"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/tags?post=7001"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}