Tema: Se puede simular un <input type="file>??
Ver Mensaje Individual
  #4 (permalink)  
Antiguo 18/11/2010, 08:47
Avatar de BloodShadow
BloodShadow
 
Fecha de Ingreso: marzo-2010
Ubicación: El Salvador
Mensajes: 393
Antigüedad: 14 años, 1 mes
Puntos: 52
Respuesta: Se puede simular un <input type="file>??
Si perdón, me hizo falta un par de cosas... Ya lo arregle, ahora te dejo completo el html y su respectivos script y css, solo agrega una imagen buscar.png para q veas resultados, luego tu la cambias a tu antojo... Guarda todo en la misma carpeta y me cuentas si te sirve... yo lo acabo de hacer y si me funciona, estare al tanto de tu respuesta...

index.html
Código HTML: 
Ver original
  1. <html>
  2.     <head>      
  3.         <title>TVOffer</title>
  4.         <link rel="stylesheet" type="text/css" href="styles.css" />
  5.         <script language="javascript" type="text/javascript" src="si.files.js"></script>
  6.         <script type="text/javascript">
  7.             SI.Files.stylizeAll();
  8.         </script>
  9.     </head>
  10.     <body>
  11.         <form id="frmPicture" name="frmChangePicture" style="padding: 0px; margin: 0px;" action="" method="post" enctype="multipart/form-data">
  12.             <input type="hidden" name="Change" value="1">
  13.             <label class="cabinet" style="background: url(btn-find-photo-es.png) 0 0 no-repeat;">
  14.                 <input type="file" id="filein" class="file" style="width:115px; cursor: pointer;" name="per-image" onchange="document.getElementById('frmPicture').submit();" />
  15.             </label>
  16.         </form>
  17.     </body>
  18. </html>


styles.css
Código CSS: 
Ver original
  1. .SI-FILES-STYLIZED label.cabinet            { width:115px; height:26px; _height:26px; background: url(../img/btn-operation.png) 0 0 no-repeat; display: block; overflow: hidden; cursor: pointer; }
  2.     .SI-FILES-STYLIZED label.cabinet input.file { position:relative; height:100%; width:auto; cursor: pointer; opacity: 0; -moz-opacity: 0; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0); }
  3.  
  4.     .SI-FILES-STYLIZED label.cabinet2            { width:108px; height:28px; _height:28px; background: url(../img/btn-find-photo.png) 0 0 no-repeat; display: block; overflow: hidden; cursor: pointer; }
  5.     .SI-FILES-STYLIZED label.cabinet2 input.file { position:relative; height:100%; width:auto; cursor: pointer; opacity: 0; -moz-opacity: 0; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0); }
  6.  
  7.      /**
  8.      * ACTUALIZACION SQUEEZEBOX
  9.      */  PARA MOSTRAR VIDEOS SWF
  10.     #sbox-window .sbox-content-swf              { overflow:hidden; }

si.files.js

Código Javascript: 
Ver original
  1. // STYLING FILE INPUTS 1.0 | Shaun Inman <http://www.shauninman.com/> | 2007-09-07
  2. if (!window.SI) { var SI = {}; };
  3. SI.Files =
  4. {
  5.     htmlClass : 'SI-FILES-STYLIZED',
  6.     fileClass : 'file',
  7.     wrapClass : 'cabinet',
  8.     wrapClass2 : 'cabinet2',
  9.     
  10.     fini : false,
  11.     able : false,
  12.     init : function()
  13.     {
  14.         this.fini = true;
  15.         
  16.         var ie = 0 //@cc_on + @_jscript_version
  17.         if (window.opera || (ie && ie < 5.5) || !document.getElementsByTagName) { return; } // no support for opacity or the DOM
  18.         this.able = true;
  19.         
  20.         var html = document.getElementsByTagName('html')[0];
  21.         html.className += (html.className != '' ? ' ' : '') + this.htmlClass;
  22.     },
  23.     
  24.     stylize : function(elem)
  25.     {
  26.         if (!this.fini) { this.init(); };
  27.         if (!this.able) { return; };
  28.         
  29.         elem.parentNode.file = elem;
  30.         elem.parentNode.onmousemove = function(e)
  31.         {
  32.             if (typeof e == 'undefined') e = window.event;
  33.             if (typeof e.pageY == 'undefined' &&  typeof e.clientX == 'number' && document.documentElement)
  34.             {
  35.                 e.pageX = e.clientX + document.documentElement.scrollLeft;
  36.                 e.pageY = e.clientY + document.documentElement.scrollTop;
  37.             };
  38.  
  39.             var ox = oy = 0;
  40.             var elem = this;
  41.             if (elem.offsetParent)
  42.             {
  43.                 ox = elem.offsetLeft;
  44.                 oy = elem.offsetTop;
  45.                 while (elem = elem.offsetParent)
  46.                 {
  47.                     ox += elem.offsetLeft;
  48.                     oy += elem.offsetTop;
  49.                 };
  50.             };
  51.  
  52.             var x = e.pageX - ox;
  53.             var y = e.pageY - oy;
  54.             var w = this.file.offsetWidth;
  55.             var h = this.file.offsetHeight;
  56.  
  57.             this.file.style.top     = y - (h / 2)  + 'px';
  58.             this.file.style.left    = x - (w - 30) + 'px';
  59.         };
  60.     },
  61.     
  62.     stylizeById : function(id)
  63.     {
  64.         this.stylize(document.getElementById(id));
  65.     },
  66.     
  67.     stylizeAll : function()
  68.     {
  69.         if (!this.fini) { this.init(); };
  70.         if (!this.able) { return; };
  71.         
  72.         var inputs = document.getElementsByTagName('input');
  73.         for (var i = 0; i < inputs.length; i++)
  74.         {
  75.             var input = inputs[i];
  76.             if (input.type == 'file' && input.className.indexOf(this.fileClass) != -1 && input.parentNode.className.indexOf(this.wrapClass) != -1)
  77.             {
  78.                 this.stylize(input);
  79.                                 
  80.             };
  81.             if (input.type == 'file' && input.className.indexOf(this.fileClass) != -1 && input.parentNode.className.indexOf(this.wrapClass2) != -1)
  82.             {
  83.                 this.stylize(input);
  84.             };
  85.             };
  86.     }
  87. };