Girovagando per il web ho trovato un effetto con i nuovi css3 molto carino., fatto utilizzando i tag introdotti nella terza versione di CSS.

Attraverso questi nuovi standard si possono applicare effetti molto carini al testo.

Seguendo questo link potrete vedere una demo.

Per prima cosa l’HTML: la suddivisione del testo del link in span serve per la stilizzazione attraverso i CSS.

<div id="animationWrapper">
   <a href="/">
      <span>Good2know</span>
      <span>F. Matteo</span>
      <span>Riggio</span>
      <span>Webmaster's Blog</span>
   </a>
</div>

Ora la parte del codice CSS: molto interessante l’utilizzo della sintassi per l’animazione applicata sul link e sugli span.

/* wrapper dell'animazione */
#animationWrapper  {
  width:530px;
  font-family: Arial,sans-serif;
  background: #222;
  padding:40px;
}

/* link che include gli span */
#animationWrapper a {
  font-weight: 800;
  text-transform: uppercase;
  font-size: 42px;
  line-height: 0.9em;
  margin-bottom: 10px;
  display: block;
  position: relative;
  color: #E58;
  text-decoration: none
}

/* animazioni css 3 */
#animationWrapper a, #animationWrapper span {
  -webkit-transition: all 0.12s ease-out;
  -moz-transition: all 0.12s ease-out;
  -o-transition: all 0.12s ease-out;
  -ms-transition: all 0.12s ease-out;
  transition: all 0.12s ease-out;
}

#animationWrapper span {
  display: block;
  color: #555;
  text-shadow: 1px 1px black, 2px 2px black, 3px 3px black, 4px 4px black, 5px 5px black, 6px 6px black, 7px 7px black, 8px 8px black;
}

/* dimensioni speciali per il primo span */
#animationWrapper .span1 {
  font-size: 76px;
  line-height: 0.8em;
}

#animationWrapper a:hover {
    color: #fff ;
    top: -3px;
    left: -3px;
}

/* gli span diventano bianchi sull'hover */
#animationWrapper a:hover span {
  color:#fff;
}

/* colori differenti per gli span */
#animationWrapper a:hover .span1 {
    text-shadow: 1px 1px #58E, 2px 2px #58E, 3px 3px #58E, 4px 4px #58E, 5px 5px #58E, 6px 6px #58E, 7px 7px #58E, 8px 8px #58E, 9px 9px #58E, 10px 10px #58E, 11px 11px #58E;
}

#animationWrapper a:hover .span2 {
    text-shadow: 1px 1px #F90, 2px 2px #F90, 3px 3px #F90, 4px 4px #F90, 5px 5px #F90, 6px 6px #F90, 7px 7px #F90, 8px 8px #F90, 9px 9px #F90, 10px 10px #F90, 11px 11px #F90;
}

#animationWrapper a:hover .span3 {
    text-shadow: 1px 1px #3C7, 2px 2px #3C7, 3px 3px #3C7, 4px 4px #3C7, 5px 5px #3C7, 6px 6px #3C7, 7px 7px #3C7, 8px 8px #3C7, 9px 9px #3C7, 10px 10px #3C7, 11px 11px #3C7;
}

#animationWrapper a:hover .span4 {
    text-shadow: 1px 1px #E58, 2px 2px #E58, 3px 3px #E58, 4px 4px #E58, 5px 5px #E58, 6px 6px #E58, 7px 7px #E58, 8px 8px #E58, 9px 9px #E58, 10px 10px #E58, 11px 11px #E58;
}

Potrete utilizzare questo effetto per header o banner ad effetto senza andare ad utilizzare javascript o flash.
In un prossimo articolo descriverò più in profondità quelle che sono le varie transizioni possibili con CSS 3.
Alla prossima!

Il file robots.txt penso che lo conosciamo tutti, è un file txt per aiutare i crawler dei motori di ricerca nell’indicizzazione.

Bene, dopo i robot nei siti internet conteranno anche gli umani, è questa l’idea di fondo di humanstxt.org, un movimento online che cerca di far utilizzare questo txt per descrivere chi sta dietro ad un sito web: developer, designer, seo, copywriter, ecc.
Esiste già anche una sintassi a riguardo:

/* TEAM */
Your title: Your name.
Site: email, link to a contact form, etc.
Twitter: your Twitter username.
Location: City, Country.

/* THANKS */
Name: name or url

/* SITE */
Last update: YYYY/MM/DD
Standards: HTML5, CSS3,..
Components: Modernizr, jQuery, etc.
Software: Software used for the development

Chi lo utilizza già? Tra i grandi google.com e flickr.com.

Zend_Acl è una delle tante classi di Zend molto utili.

Consiste in una serie di funzionalità che permettono un controllo molto facile di CHI può fare COSA aumentando il livello di protezione del sistema e diminuendo le possibilità di errore da parte dello sviluppatore.

Un esempio:
L’amministratore del sistema potrà fare tutto.
Un utente normale potrà accedere solo ad alcune pagine(o risorse).

Risorse e ruoli.
Queste sono le due entità fondamentali quando si parla di controllo degli accessi.

Le risorse
Una serie di oggetti che si possono controllare, nel caso di pattern MVC, possono essere controller, action, percorsi, ecc.

I ruoli
Sono gli attori attivi del sistema che devono accedere alle risorse, ad esempio amministratori, utenti normali, moderatori, ecc.

Quindi andremo a crea un plugin di Zend che effettuerà i controlli.

I metodi da inserire nel plugin sono 2 :

• __construct() : in cui andremo a specificare risorse, ruoli e permessi
• preDispatch() : l’operazione preliminare alla chiamata di una action in cui effettuare il controllo

Operazioni da implementare nel __construct()

1. Creazione dell’ istanza di Zend_Acl
2. Creazione della risorsa
3. Creazione del ruolo
4. Aggiunta della risorsa all’ Access Control List
5. Aggiunta del ruolo all’ Access Control List
6. Definizione dei permessi su una risorsa da parte di un ruolo

Quindi di seguito il codice:

public function __construct() {
   // Creiamo l'istanza
   $acl = new Zend_Acl();

   // Creiamo la risorsa
   $resource1 = new Zend_Acl_Resource('nomeController1');
   $resource2 = new Zend_Acl_Resource('nomeController2');

   // Creiamo il ruolo
   $role = new new Zend_Acl_Role('nomeRuolo');

   // Associamo la risorsa all' ACL
   $acl->add($resource1);
   $acl->add($resource2);

   // Associamo il ruolo all' ACL
   $acl->addRole($role);

   // Andiamo a specificare i vari permessi
   // ad es: permettiamo al ruolo di accedere alla risorsa 1 e gli neghiamo la 2
   $acl->allow('nomeRuolo', 'nomeController1');
   $acl->deny('nomeRuolo', 'nomeController2');
}

Operazioni da implementare del preDispatch():

1. Controllo dell’autenticazione dell’utente
2. Controllo sui permessi della richiesta effettuata dall’utente

Quindi di seguito il codice:

// nel preDispatch() ho la richiesta fatta
public function preDispatch(Zend_Controller_Request_Abstract $request) {
   // controllo se l'utente è autenticato altrimenti lo credo un qualsiasi ospite
   if ($this->auth->hasIdentity()) {
      $role = $this->auth->getIdentity()->tipo_utente;
   } else {
      $role = 'ospite';
   }

   // controllo se il ruolo è contemplato nell'ACL
   if (!$this->acl->hasRole($role)) {
      $role = 'ospite';
   }

   // prendo il nome del controller come risorsa alla quale l'utente vuole accedere
   $resource = $request->controller;

   // prendo il nome dell'azione come privilegio alla quale l'utente vuole accedere
   $privilege = $request->action;

   // controllo se la risorsa è contemplata dall'ACL
   if (!$this->acl->has($resource)) {
      $resource = null;
   }

   // controllo se il ruolo non ha accesso alla risorsa e lo reindirizzo alla pagina per gli ospiti
   if (!$this->acl->isAllowed($role, $resource, $privilege)) {
      $request->setControllerName($this->_authController['controller']);
      $request->setActionName($this->_authController['action']);
   }
}

Questo è il plugin da andare ad aggiungere all’applicazione.
Per aggiungerlo andate nel file di bootstrap dell’applicazione (index.php o bootstrap.php) e aggiungete il plugin così:

// istanzio la Zend_Auth
$auth = Zend_Auth::getInstance();
$auth->setStorage(new Zend_Auth_Storage_Session());

// istanzio il Zend_Controller_Front
$controller = Zend_Controller_Front::getInstance();
$controller->registerPlugin(new CustomControllerAclManager($auth));

Abbiamo quasi finito, bisogna aggiungere la fase di checking dell’identità nel preDispatch() dei vari controller:

class CustomControllerAction extends Zend_Controller_Action {

   public function preDispatch() {
      $auth = Zend_Auth::getInstance();
      if ($auth->hasIdentity()) {
         $this->view->authenticated = true;
         $this->view->identity = $auth->getIdentity();
      } else {
         $this->view->authenticated = false;
      }
   }

}

Bene, con questo il sistema di accessi è terminato.
Possiamo far ereditare il controller ad altri controller figli così che non dobbiamo specificare il checking nel preDispatch() di tutti.

Per dubbi o chiarimenti commentate qui sotto!
Alla prossima!

Consiste in una serie di adapter per gli scenari d’uso più comuni.

Da notare bene che esso gestisce solo l’autenticazione e non l’autorizzazione, che sono due cose ben diverse.

Per quanto concerne l’autorizzazione scriverò prossimamente un articolo su Zend_Acl.

Adapter
I sistemi di autenticazione sono svariati, LDAP, OpenId, Digest, ecc.
Proprio per questo Zend mette a disposizione svariati tipi di adapter, che andranno ad interfacciarsi con Zend_Auth.
I vari adapter sono:

• Zend_Auth_Adapter_DbTable per i database RDBMS (MySql, Postgresql, ecc.)
• Zend_Auth_Adapter_LDAP per l’autenticazione tramite LDAP (sistema di utenti di Windows)
• Zend_Auth_Adapter_Digest per l’autenticazione senza trasmissione di password (Digest)
• Zend_Auth_Adapter_Http per l’autenticazione Digest, Basic e RFC-2617 (poco usata)
• Zend_Auth_Adapter_OpenId per l’autenticazione tramite OpenId

Esempio
In genere l’autenticazione viene fatta utilizzando una username ed una password salvata su un database,
proprio per questo nel mio esempio utilizzerò un adapter per la connessione ad un database RDBMS.

Il setup è abbastanza semplice:

$adapter = new Zend_Auth_Adapter_DbTable($adapterDb,
                                                             'nome_tabella_utenti',
                                                             'colonna_identificativo',
                                                             'colonna_credenziale',
                                                             'controllo_sulla_credenziale');

Successivamente basterà passare all’adapter, identificativo e credenziale(username e password da un form) ed effettuare il controllo tramite la funzione authenticate di zend_auth.

<?php
class AccountController extends ZendControllerAction {

   public function loginAction() {

      // se un utente è già autenticato lo rimando alla homepage
      $auth = Zend_Auth::getInstance();

      if ($auth->hasIdentity()){
         $this->_redirect('/index/');
      }

       // controllo se è stata inviata la richiesta dal form di login
      if ($this->getRequest()->isPost()) {

         // prendo i dati di login
         $username = $request->getPost('username');
         $password = $request->getPost('password');

         // faccio il setup dell'adapter di zend_auth per i database
         $adapter = new Zend_Auth_Adapter_DbTable($this->db,
                                                                      'nome_tabella',
                                                                      'username',
                                                                      'password',
                                                                      'md5(?)');

         $adapter->setIdentity($username);
         $adapter->setCredential($password);

         // provo ad autenticare l'utente
         $result = $auth->authenticate($adapter);

         // se è valido salvo nello storage di zend_auth (una variabile di sessione)
         // l'identità dell'utente e faccio il redirect alla home
         if ($result->isValid()) {

            // l'adapter restituisce un array associativo con i dati dell'utente
            $user = $adapter->getResultRowObject();

            // Scrivo nello storage l'utente autenticato
            $auth->getStorage()->write($user['id_utente']);

            // send user to page they originally request
            $this->_redirect('/index');
         }

         // autenticazione fallita, rimando al login, magari con un messaggio d'errore
         $this->_redirect('/login');

      }
   }
}
?>

L’esempio, ovviamente, è incompleto, mancano eventuali controlli e messaggi d’errore, ma ci dà una piccola panoramica della semplicità d’autenticazione di Zend.
Manca anche la parte di View dell’azione, ma penso che chiunque sappia ormai fare una form di login, no?

Nel prossimo articolo parleremo di Zend_Acl, che combinato con Zend_Auth permette di controllare facilmente tutta la parte di autenticazione e autorizzaione di un sito/progetto.

Alla prossima!

I carissimi programmatori di Facebook hanno rilasciato un piccolo progetto che ottimizza notevolmente le prestazioni, in fase di esecuzione, di codice php: Facebook HipHop.

Come funziona?

Questa applicazione trasforma codice PHP in codice compilato in C++ con il sacrificio di qualche funzione php, tipo eval().

Per chi non lo sapesse, la differenza tra un linguaggio intepretato ed uno compilato è appunto nella fase di interpretazione del codice, cosa che in C++ non avviene una volta compilato il codice.

Il miglioramento delle prestazioni è notevole: si guadagna il 50% di risparmio di CPU; in questo modo i server di FB valgono il doppio rispetto ad un normale server linux-php (anche in termini di denaro ).

Di seguito trovate la pagina facebook del progetto e il progetto su GitHub con licenza Open Source.

Propongo di seguito un interessante effetto in javascript e css3 che permette di creare un effetto di rotazione a qualsiasi contenuto.

La proprietà che utilizzeremo è transform: rotate(90deg) .

Di seguito una demo.

Ricordiamoci che non tutti i browser permettono l’utilizzo delle proprietà transform CSS3.

Quindi controlliamo che browser ha il client e impostiamo le proprietà di conseguenza.

Per farlo utilizziamo una funzione di jQuery che ci permette di sapere quale sia il browser in uso.

<br>var cssPrefix = "";<br>if ($.browser.mozilla){<br> cssPrefix = "moz";<br> } else if ($.browser.safari){<br> cssPrefix = "webkit";<br> } else if ($.browser.opera){<br> cssPrefix = "o";<br> } else if ($.browser.msie){<br> cssPrefix = "ms";<br> }<br>

Successivamente impostiamo un intervallo di tempo a 20 millisecondi che chiama una funzione che fa cambiare la posizione, rispetto l’originale, del nostro elemento.

<br>window.setInterval(function(){<br>   if(cssPrefix) {<br>      d += speed * dir;<br>   }<br>   rotate(cssPrefix, d);<br>}, 20);<br><br>function rotate(cssPrefix,d){<br>   d += speed * dir;<br>   $('#rays').css('-'+cssPrefix+'-transform','rotate('+d+'deg)');<br>}<br>

Ricordo che purtroppo questo scriptino non funzione su Internet Explorer in quanto non supporta la proprietà css transform.

Salve a tutti i lettori di good2know.

Oggi volevo proporvi una delle nuove proprietà css3 per creare box(div) con sfondi multipli senza dover dichiarare milioni di classi.

Qui potete vedere una demo.

La sintassi è molto semplice.

.box {
   width: 400px;
   background:   url(images/bg-top.png) top no-repeat,
                 url(images/bg-bottom.png) bottom no-repeat,
                 url(images/bg-repeated.png) repeat-y;
}

Ovviamente questa specifica funziona perfettamente per quasi tutti i browser, eccetto che per Internet Explorer(e quale se no? )

In aiuto però ci viene Jason Johnston con il suo Css3PIE (Css3 -  Progressive Internet Explorer), una libreria javascript che ci viene in aiuto per applicare gli stili css3 anche per Internet Explorer.

Come si usa Css3PIE ?

Scaricate la libreria e scompattatela in una cartella che volete (io in genere la tengo nella cartella js dei javascript).

In alcuni casi dovrete aggiungere al file .htaccess la riga:

AddType text/x-component .htc

Questo perchè Internet Explorer non restituisce il content-type corretto per il file .htc che useremo.

Ora nella proprieta del css andrete ad aggiungere la proprietà behavior e -pie-background, quindi il css diventerà così:

<pre>width: 400px;
background:   url(images/bg-top.png) top no-repeat,
              url(images/bg-bottom.png) bottom no-repeat,
              url(images/bg-repeated.png) repeat-y;
<pre>-pie-background:   url(images/bg-top.png) top no-repeat,
              url(images/bg-bottom.png) bottom no-repeat,
              url(images/bg-repeated.png) repeat-y;</pre>
</pre>
behavior: url(path/to/PIE.htc);

Ora il box avrà gli sfondi ripetuti anche su Internet Explorer.

Per chi non lo sapesse si tratta di un framework (una struttura di supporto software per aiutare lo sviluppatore) tra i migliori in php.

Secondo il mio modesto parere si tratta del migliore, da notare che i due fondatori di Zend Technologies(Zeev Suraski e And Gutmans dal cui nome Zend) hanno riscritto il motore di php2 portandolo alla versione 3 e successive diventando di fatto il motore principale di PHP.

Il framework è orientato verso un pattern di programmazione MVC, cioè Model-View-Controller, orientato agli oggetti.

Model

Il modello si occuperà di connessione al database con relative query e funzioni per il recupero dei dati.

Esempio:

Il file  di modello News.php avrà i metodi :

• getAllNews() per restituire tutte le news
• getNewsById() per restituire una news specifica
• insertNews() e updateNews per l’inserimento e la modifica di una news
• deleteNews() per la cancellazione di una news

View

La view(o anche template) si occuperà della formattazione e della visualizzazione dei dati recuperati.

Esempio del file della view view.phtml

<?php

echo $this->newsTitle;

echo $this->newsText;

?>

Controller

Il controller presenterà le chiamate ai metodi del modello per il recupero dei dati e le chiamate alla view, a cui passerà i dati recuperati, per la visualizzazione.

Passo 1 : Installare la piattaforma WAMP(Windows, Apache, MySql, Php)

Per far girare Zend Framework dobbiamo avere un server che faccia girare PHP, di gran lunga è preferibile utilizzare Linux e Apache come sistema operativo e web server piuttosto di un Windows con IIS, ma purtroppo a volte non si ha un pc con Linux, in questo caso utilizzate una configurazione WAMP(Windows,Apache,MySql,Php).

Dovremo installare quindi Apache, Php 5, e MySql.

Consiglio mio è quello di installare i componenti separatamente piuttosto di utilizzare alcuni programmi già pronti che forniscono le funzionalità tutte insieme, tipo EasyPHP . La differenza sta nella libertà di personalizzazione dei file di configurazione.

Di seguito i link alle risorse necessarie:

- Apache

- Php 5

- MySql

Installate nell’ ordine in cui trovate i link per non avere problemi.

Ora andate nella cartella conf,  dentro la cartella di installazione di Apache.

Passo 2 – Far trovare ad Apache il motore di Php e caricare il modulo per il rewrite degli URL

Ricordo che il webserver Apache ha come parametro di base della Document Root la cartella www all’interno della cartella d’installazione del programma.

Aprite il file httpd.conf con il blocco note e sotto tutte le righe “Load Module” aggiungete questo:

LoadModule php5_module “CartellaDiPhp\php5apache2_2.dll”
AddType application/x-httpd-php .php
PHPIniDir “CartellaDiPhp”

Ora dobbiamo far caricare ad Apache il modulo per il rewrite degli URL di indirizzo (dopo si spiegherà il perchè) e quello per l’utilizzo dei virtual host.

Dobbiamo scommentare(cancellare il cancelletto), dalla lista dei moduli del file di configurazione(vedi sopra) queste righe :

- LoadModule rewrite_module modules/mod_rewrite.so

- LoadModule vhost_alias_module modules/mod_vhost_alias.so

Passo 3 : Impostare le variabili d’ambiente di Windows

Per alcuni sistemi operativi (ad esempio il nuovo Windows 7) dobbiamo modificare le variabili d’ambiente di Windows.

Apriamo il Pannello di Controllo, poi Sistema e clicchiamo sulla scheda Avanzate, modifichiamo il valore della variabile Path aggiungendo un punto e virgola in fondo e indicando il percorso assoluto della cartella dove si trova php.

Esempio :

…altriValoriDelPath…;C:\ProgramFiles\php)

Aggiungete ora una nuova variabile d’ambiente, chiamandola PHPRC (sta per PHP runtime config) e specificando sempre la cartella dove si trova php.

Passo 4 : Modificare il file php.ini

Per far aiutarci nello sviluppo con Zend Framework dobbiamo modificare alcuni valori del file php.ini presente nella cartella di installazione di php.

Impostate:

• display_error: on
• display_startup_errors : on
• log_errors: on
• extension: dll (per alcuni database, tipo postgres dobbiamo poter utilizzare alcune librerie dll)

Per ultima cosa dobbiamo includere l’estensione per l’adattatore di php al nostro db.

Quindi cercate nell’elenco delle estensioni le righe con :

;extension=php_pdo.dll

;extension=php_pdo_mysql.dll

;extension=php_mysql.dll

e cancellate il punto e virgola precedente per scommentarle.

Nel caso abbiate altri tipi di database(postgresql, sqlite,ecc.) basterà scommentare le righe corrispondenti.

Passo 5: Includere il file di VirtualHost di un progetto

All’interno del vostro progetto create un file con estensione .conf (ad es: nomeprogetto-httpd.conf) con questa struttura:

<VirtualHost *:80>
ServerName    nomeCheVolete
DocumentRoot  “D:/Progetti/nomeProgetto/htdocs”
DirectoryIndex index.html index.shtml index.php index.htm

<Directory “D:/Progetti/nomeProgetto/htdocs”>
AllowOverride    All
Options        All
Order        allow,deny
Allow        from all
</Directory>

php_value  include_path “D:/Progetti/nomeProgetto/include”
php_value  register_globals       Off
php_flag      magic_quotes_gpc       Off
</VirtualHost>

Questo file ora dovrà essere incluso all’interno del file di configurazione di Apache (httpd.conf):

Include D:/Progetti/phpweb20/etc/phpweb20-httpd.conf

Passo 7 : modificare la risoluzione degli host del sistema operativo

Ora andate nella cartella C:/Windows/system32/drivers/etc ed aprite con il blocco note il file hosts.

Aggiungete la riga 127.0.0.1   serverName , in questo modo il vostro pc reindirizzerà(risolverà) tutti gli url con radice serverName inviandoli all’indirizzo 127.0.0.1 che è anche l’indirizzo di localhost, e quindi inviando la richiesta al server web.

Passo 8 : La struttura di un progetto con Zend Framework e il file .htaccess

Ricordate che vi ho fatto caricare il modulo per il rewrite degli URL, bene, ora dobbiamo inserire nella cartella pubblica del progetto il file .htaccess, che gestirà tutti gli url dell’applicazione inviando le richieste ai vari controller, così:

RewriteEngine on
RewriteBase /
RewriteRule !\.(js|ico|txt|gif|jpg|png|css)$ index.php

Ricordo che il pattern usato è sempre MVC, quindi la struttura gerarchica del nostro progetto deve essere simile a questa :

Perchè il modulo rewrite?

Utilizziamo il modulo per riscrivere gli URL perchè Zend Framework gestisce in automatico ogni azione di un applicazione mediante gli url.

Ad esempio l’url http://myapplication.com/news/new indica di eseguire l’azione new nel controller News.

Bene, abbiamo creato un nostro virtual host con il framework Zend installato.

Prossimamente inizieremo a guardare un controller di base e a vedere le potenzialità di Zend Framework.

Oggi vi presento un piccolo trucchetto per personalizzare il colore del testo selezionato.

Iniziamo dai css:

/* webkit, opera, IE9 */
div.nomeDiv::selection { background:lightblue; }
/* mozilla firefox */
div.nomeDiv::-moz-selection { background:lightblue; }

Il primo tipo di selettore agirà per webkit opera e IE9 mentre il secondo solo per Firefox.

Ricordo che è codice CSS 3, quindi non tutti i browser(IE di cacca!) lo supportano.

Cari lettori di good2know, oggi vi presento un nuovo articolo sulla personalizzazione degli input file di un form.

Il metodo è semplice, utilizza i fogli di stile CSS e le proprietà del DOM.

Per vedere un esempio cliccate sul link.

Il concetto è di mettere un input falso al di sopra dell’input file reale e fare in modo che quando viene cliccato l’input file falso o il bottone sfoglia si apra comunque la finestra di scelta del file.

Una volta selezionato il file, l’input file reale dovrà avere come “value” il reale percorso del file.

Di seguito il codice css :

.input_file{
background: url(../img/bg_input_file.png) no-repeat;
border: none;
width: 202px;
height: 26px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
margin:0 0 0 0;
padding:0 0 0 0px;
}
.input_file:focus{ background-color: transparent;}
input {
background: url(../img/bg_input_file.png) no-repeat;
border: none;
width: 202px;
height: 26px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
margin:0 0 0 0;
padding:0 0 0 0px;
}
input:focus {	background-color: transparent;}
div.fileinputs {
position: relative;
height: 26px;
width: 202px;
}
input.file {
width: 274px;
margin: 0;
}
input.file.hidden {
position: relative;
text-align: right;
-moz-opacity:0 ;
filter:alpha(opacity: 0);
opacity: 0;
z-index: 2;
}
div.fakefile {
position: absolute;
top: 0px;
left: 0px;
width: 274px;
height:26px;
padding: 0;
margin: 0;
z-index: 1;
}
div.fakefile input {
position:relative;
bottom:8px;
margin:0 0 0px 0;
padding:5px 0 0px 10px;
}

Di seguito la funzione js che dovrà essere richiamata nel tag body.

var W3CDOM = (document.createElement && document.getElementsByTagName);
function init() {
	if (!W3CDOM) return;
	var fakeFileUpload = document.createElement('div');
	fakeFileUpload.className = 'fakefile';
	fakeFileUpload.appendChild(document.createElement('input'));
	var image = document.createElement('img');
	image.src='img/btn_sfoglia2.png';
        fakeFileUpload.appendChild(image);
	var x = document.getElementsByTagName('input');
	for (var i=0;i<x.length;i++) {
		if (x[i].type != 'file') continue;
		if (x[i].getAttribute('noscript')) continue;
		if (x[i].parentNode.className != 'fileinputs') continue;
		x[i].className = 'file hidden';
		var clone = fakeFileUpload.cloneNode(true);
		x[i].parentNode.appendChild(clone);
		x[i].relatedElement = clone.getElementsByTagName('input')[0];
		if (x[i].value)
			x[i].onchange();
		x[i].onchange = x[i].onmouseout = function () {
			this.relatedElement.value = this.value;
		}
	}
}

<body onLoad="init();">
<form action="" method="post" enctype="multipart/form-data">
<div>     <input type="file" name="link_file" /> </div>
</form>
</body>

Compatibilità

Lo script qui sopra è compatibile con tutti i browser, bisogna solo personalizzare il css per Explorer.

Download

Di seguito il link per scaricare l’esempio di sopra.