[Resolvido] Input type=file - Estilizar

[sfonseca45 0]

Bom Dia

 

A maior dificuldade de estilizar um formulário é quando temos um campo tipo file, cada navegador apresenta este campo de forma diferente.

Precisando fazer isso encontrei varios modos, mas todos criando um campo falso, pesquisando mais encontrei um script que utiliza jquery e como este problema atraplha muita gente aqui esta uma solução simples.

 

arquivo jquery.filestyle.js

/*
* Style File - jQuery plugin for styling file input elements
*  
* Copyright (c) 2007-2008 Mika Tuupola
*
* Licensed under the MIT license:
*   http://www.opensource.org/licenses/mit-license.php
*
* Based on work by Shaun Inman
*   http://www.shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom
*
* Revision: $Id: jquery.filestyle.js 303 2008-01-30 13:53:24Z tuupola $
*
*/

(function($) {

   $.fn.filestyle = function(options) {

       /* TODO: This should not override CSS. */
       var settings = {
           width : 250
       };

       if(options) {
           $.extend(settings, options);
       };

       return this.each(function() {

           var self = this;
           var wrapper = $("<div>")
                           .css({
                               "width": settings.imagewidth + "px",
                               "height": settings.imageheight + "px",
                               "background": "url(" + settings.image + ") 0 0 no-repeat",
                               "background-position": "right",
                               "display": "inline",
                               "position": "absolute",
                               "overflow": "hidden"
                           });

           var filename = $('<input class="file">')
                            .addClass($(self).attr("class"))
                            .css({
                                "display": "inline",
                                "width": settings.width + "px"
                            });

           $(self).before(filename);
           $(self).wrap(wrapper);

           $(self).css({
                       "position": "relative",
                       "height": settings.imageheight + "px",
                       "width": settings.width + "px",
                       "display": "inline",
                       "cursor": "pointer",
                       "opacity": "0.0"
                   });

           if ($.browser.mozilla) {
               if (/Win/.test(navigator.platform)) {
                   $(self).css("margin-left", "-142px");                    
               } else {
                   $(self).css("margin-left", "-168px");                    
               };
           } else {
               $(self).css("margin-left", settings.imagewidth - settings.width + "px");                
           };

           $(self).bind("change", function() {
               filename.val($(self).val());
           });

       });


   };

})(jQuery);

 

no html

<script src="../js/jquery.js" type="text/javascript"></script>
<script src="../js/jquery.filestyle.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("input[type=file]").filestyle({
image: "btn-foto.gif",
imageheight : 20,
imagewidth : 90,
width : 200
});
});
</script>

Lembrando que precisa da biblioteca jquery

 

Mais informações no site

 

http://www.appelsiini.net/projects/filestyle

 

Espero que seja útil.

 

Abs