bouton de navigation sur mesure

Question

est-il un moyen d'ouvrir la boîte de dialogue de fichier à télécharger un fichier, sur un clic d'un bouton ou une image, ou un lien ..

par exemple:

<a href="" onclick="openDialogBox('fileID')....." /> Select File To Upload</a> 
<input type="file" id="fileID" /> 

J'ai besoin exemple le plus simple qui fonctionnera dans tous les navigateurs. Id aime utiliser javascript pur ou ajax.

Answer 1

C'est la façon dont j'ai eu affaire avec juste HTML & CSS

(Et je pense qu'il est pas nécessaire d'appeler un javascript à travers):

<style> 
    span.browse_but { font-family:Arial; width:65px; height:20px; text-align:center; line-height:18px; margin:0px; font-size:10px; font-weight:bold; 
         border:1px solid #ccc; float:left; cursor:pointer; padding:0px; background:#eee; display:block; float:left; overflow:hidden; } 
    span.browse_but font { font-size:16px; color:#c00; } 
    span.browse_but input { position:absolute; cursor:pointer; right:0px; top:0px; height:20px; width:195px; margin:0px; opacity:0; filter:alpha(opacity=0); } 
</style> 

<span style="position:relative;" class="browse_but"> 
    <font style="font-weight:bold; color:#093; position:relative; top:2px; font-size:17px;">+</font> Pick a file 
    <input name="F" type="file" value=""/> 
</span> 

Voir violon ici: Deal with ugly browse button

La stratégie consiste à créer une entrée de fichier avec opacité = 0 et une position: absolute dans un conteneur avec la position: relative. Ainsi, l'entrée était invisible pour l'utilisateur mais quand ils cliquent sur le conteneur, l'événement de clic d'entrée sera déclenché comme prévu.

Ce que vous pouvez faire pour ce répondre à vos propres besoins:

• Insérez l'image que vous voulez dans la position récipient & correctement;
• Modifier la taille du conteneur d'entrée de fichier & pour l'adapter à l'image;

Bonne chance!

Answer 2

Oui c'est possible, AJAX n'est pas pertinent. Code sera:

<a href="#" onclick="document.getElementById('fileID').click(); return false;" /> Select File To Upload</a> 

Il pourrait ne pas fonctionner sur certains navigateurs, quick test que j'écrit fonctionnait bien sur Chrome 15 (beta), IE9 et Firefox 6 donc je suppose que cela couvre la plupart des navigateurs modernes.