Se puede simular un <input type="file>??

[BloodShadow]

Hola Devil Akuma te dejo este codigo, solo copia y pega y has los respectivos cambios de estilos y la imagen :D

En el HTML

Código HTML:

<form id="frmPicture" name="frmChangePicture" action="" method="post" enctype="multipart/form-data">
  <input type="hidden" name="Change" value="1">
  <label class="cabinet" style="background: url(img/site_new/btn-change-photo.png) 0 0 no-repeat;">
  <input type="file" id="filein" class="file" style="width:115px; cursor: pointer;" name="per-image" onchange="document.getElementById('frmPicture').submit();" />
  </label>
</form>
 

y en el head agrega este javascript

Código Javascript:

// STYLING FILE INPUTS 1.0 | Shaun Inman <http://www.shauninman.com/> | 2007-09-07
if (!window.SI) { var SI = {}; };
SI.Files =
{
    htmlClass : 'SI-FILES-STYLIZED',
    fileClass : 'file',
    wrapClass : 'cabinet',
    wrapClass2 : 'cabinet2',
    
    fini : false,
    able : false,
    init : function()
    {
        this.fini = true;
        
        var ie = 0 //@cc_on + @_jscript_version
        if (window.opera || (ie && ie < 5.5) || !document.getElementsByTagName) { return; } // no support for opacity or the DOM
        this.able = true;
        
        var html = document.getElementsByTagName('html')[0];
        html.className += (html.className != '' ? ' ' : '') + this.htmlClass;
    },
    
    stylize : function(elem)
    {
        if (!this.fini) { this.init(); };
        if (!this.able) { return; };
        
        elem.parentNode.file = elem;
        elem.parentNode.onmousemove = function(e)
        {
            if (typeof e == 'undefined') e = window.event;
            if (typeof e.pageY == 'undefined' &&  typeof e.clientX == 'number' && document.documentElement)
            {
                e.pageX = e.clientX + document.documentElement.scrollLeft;
                e.pageY = e.clientY + document.documentElement.scrollTop;
            };
 
            var ox = oy = 0;
            var elem = this;
            if (elem.offsetParent)
            {
                ox = elem.offsetLeft;
                oy = elem.offsetTop;
                while (elem = elem.offsetParent)
                {
                    ox += elem.offsetLeft;
                    oy += elem.offsetTop;
                };
            };
 
            var x = e.pageX - ox;
            var y = e.pageY - oy;
            var w = this.file.offsetWidth;
            var h = this.file.offsetHeight;
 
            this.file.style.top     = y - (h / 2)  + 'px';
            this.file.style.left    = x - (w - 30) + 'px';
        };
    },
    
    stylizeById : function(id)
    {
        this.stylize(document.getElementById(id));
    },
    
    stylizeAll : function()
    {
        if (!this.fini) { this.init(); };
        if (!this.able) { return; };
        
        var inputs = document.getElementsByTagName('input');
        for (var i = 0; i < inputs.length; i++)
        {
            var input = inputs[i];
            if (input.type == 'file' && input.className.indexOf(this.fileClass) != -1 && input.parentNode.className.indexOf(this.wrapClass) != -1)
            {
                this.stylize(input);
                                
            };
            if (input.type == 'file' && input.className.indexOf(this.fileClass) != -1 && input.parentNode.className.indexOf(this.wrapClass2) != -1)
            {
                this.stylize(input);
            };
            };
    }
};