{"id":6268,"date":"2014-04-04T19:08:32","date_gmt":"2014-04-04T19:08:32","guid":{"rendered":"https:\/\/www.jose-aguilar.com\/blog\/?p=6268"},"modified":"2014-12-30T22:35:54","modified_gmt":"2014-12-30T22:35:54","slug":"button-upload-select","status":"publish","type":"post","link":"https:\/\/www.jose-aguilar.com\/blog\/button-upload-select\/","title":{"rendered":"Button Upload Select"},"content":{"rendered":"

Los navegadores de hoy en d\u00eda tienen varios campos que nos vienen muy bien para implementar nuestros formularios. Los inputs, los selects, los textareas, etc.<\/p>\n

Estos campos tienen un aspecto b\u00e1sico que en la mayor\u00eda de los casos siempre se tienen que cambiar su aspecto. Es en este punto don podr\u00edamos tener problemas.<\/p>\n

En este art\u00edculo nos vamos a centrar en una de las formas para poder personalizar totalmente el bot\u00f3n de upload de archivos o examinar archivos en el disco duro para subir<\/strong>.<\/p>\n

\"examinar\"<\/p>\n

Seguro que hay otras formas pero yo me he ayudado de jQuery para llegar a una soluci\u00f3n y me gustar\u00eda compartirlo.<\/p>\n

El c\u00f3digo HTML que a\u00f1adir\u00eda ser\u00eda algo por el estilo a lo siguiente:<\/p>\n

<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<input<\/span><\/a> style<\/span>=<\/span>"display:none;"<\/span> type<\/span>=<\/span>"file"<\/span> id<\/span>=<\/span>"product_image"<\/span> name<\/span>=<\/span>"product_image"<\/span> value<\/span>=<\/span>""<\/span> size<\/span>=<\/span>"chars"<\/span> \/<\/span>><\/span>\n<button<\/span><\/a> class<\/span>=<\/span>"fileSelect"<\/span> name<\/span>=<\/span>"product_image"<\/span>><\/span>Upload Image<\/<\/span>button<\/span><\/a>><\/span><\/pre><\/div><\/div>\n
En el c\u00f3digo anterior, si te fijas tenemos un input tipo file escondido y un bot\u00f3n simple con una clase.<\/p>\n
Despu\u00e9s, justo debajo o en la cabecera podremos a\u00f1adir el c\u00f3digo jQuery que simular\u00eda el click del input file a trav\u00e9s de nuestro bot\u00f3n personalizado.<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<<\/span>script type=<\/span>"text\/javascript"<\/span>><\/span>\n$(<\/span>document)<\/span>.ready<\/span>(<\/span>function<\/span>(<\/span>)<\/span>{<\/span>\n    $(<\/span>'.fileSelect'<\/span>)<\/span>.click<\/span>(<\/span>function<\/span>(<\/span>)<\/span> {<\/span>\n         $(<\/span>'#product_image'<\/span>)<\/span>.click<\/span>(<\/span>)<\/span>;<\/span>\n    }<\/span>)<\/span>;<\/span>\n}<\/span>)<\/span>;<\/span>\n<\/<\/span>script><\/span><\/pre><\/div><\/div>\n
Es importante saber que para implementar este ejemplo necesitaremos incluir la librer\u00eda jQuery en la cabecera de nuestra p\u00e1gina.<\/p>\n
Ver ejemplo en funcionamiento<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Los navegadores de hoy en d\u00eda tienen varios campos que nos vienen muy bien para implementar nuestros formularios. Los inputs, los selects, los textareas, etc. Estos campos tienen un aspecto b\u00e1sico que en la mayor\u00eda de los casos siempre se tienen que cambiar su aspecto. Es en este punto don podr\u00edamos tener problemas. En este […]<\/p>\n","protected":false},"author":1,"featured_media":5283,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[167,102],"class_list":["post-6268","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery","tag-eventos","tag-uploads"],"yoast_head":"\nButton Upload Select - Jose Aguilar Blog<\/title>\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=\"Button Upload Select - Jose Aguilar Blog\" \/>\n<meta property=\"og:description\" content=\"Los navegadores de hoy en d\u00eda tienen varios campos que nos vienen muy bien para implementar nuestros formularios. Los inputs, los selects, los textareas, etc. Estos campos tienen un aspecto b\u00e1sico que en la mayor\u00eda de los casos siempre se tienen que cambiar su aspecto. Es en este punto don podr\u00edamos tener problemas. En este […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jose-aguilar.com\/blog\/button-upload-select\/\" \/>\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=\"2014-04-04T19:08:32+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2014-12-30T22:35:54+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/11\/jquery1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"200\" \/>\n\t<meta property=\"og:image:height\" content=\"200\" \/>\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=\"1 minuto\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/button-upload-select\/\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/button-upload-select\/\",\"name\":\"Button Upload Select - Jose Aguilar Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/button-upload-select\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/button-upload-select\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/11\/jquery1.png\",\"datePublished\":\"2014-04-04T19:08:32+00:00\",\"dateModified\":\"2014-12-30T22:35:54+00:00\",\"author\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/button-upload-select\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jose-aguilar.com\/blog\/button-upload-select\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/button-upload-select\/#primaryimage\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/11\/jquery1.png\",\"contentUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/11\/jquery1.png\",\"width\":200,\"height\":200},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/button-upload-select\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.jose-aguilar.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Button Upload Select\"}]},{\"@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":"Button Upload Select - Jose Aguilar Blog","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":"Button Upload Select - Jose Aguilar Blog","og_description":"Los navegadores de hoy en d\u00eda tienen varios campos que nos vienen muy bien para implementar nuestros formularios. Los inputs, los selects, los textareas, etc. Estos campos tienen un aspecto b\u00e1sico que en la mayor\u00eda de los casos siempre se tienen que cambiar su aspecto. Es en este punto don podr\u00edamos tener problemas. En este […]","og_url":"https:\/\/www.jose-aguilar.com\/blog\/button-upload-select\/","og_site_name":"Jose Aguilar Blog","article_publisher":"https:\/\/www.facebook.com\/joseaguilarblog","article_published_time":"2014-04-04T19:08:32+00:00","article_modified_time":"2014-12-30T22:35:54+00:00","og_image":[{"width":200,"height":200,"url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/11\/jquery1.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":"1 minuto"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jose-aguilar.com\/blog\/button-upload-select\/","url":"https:\/\/www.jose-aguilar.com\/blog\/button-upload-select\/","name":"Button Upload Select - Jose Aguilar Blog","isPartOf":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/button-upload-select\/#primaryimage"},"image":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/button-upload-select\/#primaryimage"},"thumbnailUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/11\/jquery1.png","datePublished":"2014-04-04T19:08:32+00:00","dateModified":"2014-12-30T22:35:54+00:00","author":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11"},"breadcrumb":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/button-upload-select\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jose-aguilar.com\/blog\/button-upload-select\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/button-upload-select\/#primaryimage","url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/11\/jquery1.png","contentUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/11\/jquery1.png","width":200,"height":200},{"@type":"BreadcrumbList","@id":"https:\/\/www.jose-aguilar.com\/blog\/button-upload-select\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.jose-aguilar.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Button Upload Select"}]},{"@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\/6268","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=6268"}],"version-history":[{"count":0,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/6268\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media\/5283"}],"wp:attachment":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media?parent=6268"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/categories?post=6268"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/tags?post=6268"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}