2010-12-10 4 views
4

Moi et un gars du travail travaillons sur une application web pour que nos clients puissent se connecter et gérer leurs détails. L'une des sections demande à l'utilisateur de télécharger le logo de sa société, mais comme nous le savons tous, le bouton html browes ou le tag est également connu sous le nom de cookie dur. voilà comment je veux regarder: alt textStyling avec CSS et fonctionnalité du bouton de téléchargement

Mais la réalité est que si je mets une étiquette de vieux fichier là-bas, il aurait l'air fade, générique et hors de propos, donc je googlé pour la solution et après elle de la chasse, je suis tombé sur ce code qui a produit l'image ci-dessous le code (qui je montre aussi le téléchargement de fichier sans l'opacité à zéro):

#divinputfile 
{ 
height:85px; 
width:250px; 
margin:0px; 
background-image: url(images/upload_file.gif); 
background-repeat: no-repeat; 
background-position: right bottom; 
} 

#divinputfile #filepc 
{ 
opacity: 0.0; 
-moz-opacity: 0.0; 
filter: alpha(opacity=00); 
font-size:16px; 
cursor: pointer; 
} 

#filepc 
{ 
margin-top: 12px; 
} 

#fakeinputfile 
{ 
margin-top:-28px; 
} 

#fakeinputfile #fakefilepc 
{ 
width:250px; 
height:22px; 
font-size:18px; 
font-family:Arial; 
} 

<body> 
<br /> 
<div id="divinputfile"> 
    <div id="fakeinputfile"> 
    <br /> 
     <input name="fakefilepc" type="text" id="fakefilepc" /> 
    </div> 
    <div align="right"> 
    <input name="filepc" type="file" size="1" id="filepc" onchange="document.getElementById('fakefilepc').value = this.value;"/> 
    </div> 
</div> 
</body> 

alt text

C'est un hack de base et lorsque je sélectionne le bouton stylé Je sélectionne vraiment le bouton de téléchargement invisible, puis la valeur de l'upl oad est passé dans la boîte de test ci-dessus pour ressembler à sa partie réelle du téléchargement. Deux problèmes avec cette méthode et j'espère que vous serez en mesure de m'aider ici est

a) Seul le bouton peut être cliqué pour télécharger. Dans la plupart des navigateurs (sauf Chrome), vous pouvez cliquer dans la zone de texte ainsi que sur le bouton pour télécharger l'image. Bien sûr avec cette méthode le texte du chemin de fichier est ajouté à la boîte de texte mais toute modification à cette boîte ne changera pas le fichier par exemple: si vous avez sélectionné file1.jpg à télécharger mais que vous vouliez vraiment file2.jpg, changer le chemin du fichier dans la zone de texte ne changera rien à l'élément de téléchargement ACTUAL

b) Certains navigateurs comme Chrome et Opera ajoutent le \ fakepath \ filepath à la zone de texte et c'est juste moche, donc toute instruction if qui peut l'enlever aussi serait extrêmement utile .

J'espère que vous pourrez m'aider avec ceci, si ce n'est pas via des astuces de code, alors si quelqu'un connaît une bonne connexion JavaScript qui sauve la journée.

Merci

+0

Vous pouvez utiliser CSS3.Go à la page: http://w3schools.com/css3/css3_borders.asp et vous voir comment arrondir les coins de vos boutons .. – Rares

Répondre

1

Vous avez déjà javascript pour afficher la zone de texte pour la nouvelle valeur filepath sur le changement. C'est là que vous devrez également supprimer tout/fakepath/parts etc.

Vous pouvez également ajouter un événement de clic à la zone de texte qui activera l'événement de clic de parcours de fichier.

Je peux immédiatement vous dire que c'est plutôt facile avec jQuery, mais je ne sais pas comment on pourrait le faire avec JS. En fait, il semble que les actions d'entrée de fichier ne puissent pas être déclenchées. Voir la question associée In JavaScript can I make a "click" event fire programmatically for a file input element?

+1

Attendez, si c'est * _impossible_ * avec JavaScript simple (comme l'autre question que vous avez liée à dit), comment cela peut-il être facile avec jQuery? –

+0

Si cela avait été possible du tout, cela aurait été facile avec jQuery ... Il s'agissait principalement de l'événement click et de la gestion des événements, etc. – Kissaki

1

Question a: Pas de déclenchement de l'événement click. La sécurité et tout ça. Vous pouvez ajouter un deuxième bouton de téléchargement invisible tout comme le premier. Si l'un change, effacez l'autre. Et les hacks s'accumulent ...

Question b: Voir la réponse de Kissaki. Vous aurez besoin de JS pour effacer ce deuxième champ invisible de toute façon ...

1

Voici une solution.

  1. La question A est résolue en rendant le <input type="file" /> la taille réelle de votre widget, et en utilisant des divisions pour créer des zones non-cliquables.
  2. Question B est résolu en utilisant l'astuce que j'ai trouvé here

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
<title>Style the File Upload Input - Example</title> 
<style type="text/css"> 
#file-upload { 
    position:relative; 
    top:0px; 
    left:0px; 
    width:250px; 
    height:65px; 
    overflow:hidden; 
    padding-top:15px; 
    background-image: url(images/upload_file.gif); 
    background-repeat: no-repeat; 
    background-position: right bottom; 
} 
#file-upload input[type='file'] { 
    width:250px; 
    height:65px; 
    font-size:65px; 
    opacity:0; 
    filter:alpha(opacity=0); 
    position:absolute; 
    top:15px; 
    left:0px; 
    z-index:9; 
} 
#file-upload input { 
    width:97%; 
} 
#file-upload #no-click { 
    position:absolute; 
    bottom:0px; 
    left:0px; 
    z-index:10; 
    width:125px; 
    height:40px; 
} 
</style> 
</head> 
<body> 
<div id="file-upload"> 
    <input size="0" name="filepc" type="file" id="filepc" onchange="var clone = this.cloneNode(true);clone.type='text';document.getElementById('fakefilepc').value = clone.value?clone.value:this.value;" /> 
    <div id="fake-file-upload"> 
     <input name="fakefilepc" type="text" id="fakefilepc" /> 
     <div id="no-click"></div> 
    </div> 
</div> 
</body> 

Vous voudrez peut-être à vous soucier de la dégradation gracieuse ... voici la même chose avec le code HTML, CSS et JavaScript plus proprement séparé qui devrait se dégrader proprement.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
<title>Style the File Upload Input - Example</title> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $("body").addClass("js"); 
     $("#file-upload").append("<div id=\"fake-file-upload\">" + 
         "<input name=\"fakefilepc\" type=\"text\" id=\"fakefilepc\" />" + 
         "<div id=\"no-click\"></div>" + 
        "</div>"); 
     $("#file-upload input[type='file']").change(function() { 
      var clone = this.cloneNode(true); 
      clone.type='text'; 
      document.getElementById('fakefilepc').value = clone.value?clone.value:this.value; 
     }); 
    }); 
</script> 
<style type="text/css"> 
#file-upload { 
    position:relative; 
    top:0px; 
    left:0px; 
    width:250px; 
    height:65px; 
} 
body.js #file-upload { 
    overflow:hidden; 
    padding-top:15px; 
    background-image: url(images/upload_file.gif); 
    background-repeat: no-repeat; 
    background-position: right bottom; 
} 
body.js #file-upload input[type='file'] { 
    width:250px; 
    height:65px; 
    font-size:65px; 
    opacity:0; 
    filter:alpha(opacity=0); 
    position:absolute; 
    top:15px; 
    left:0px; 
    z-index:9; 
} 
body.js #file-upload input { 
    width:97%; 
} 
body.js #file-upload #no-click { 
    position:absolute; 
    bottom:0px; 
    left:0px; 
    z-index:10; 
    width:125px; 
    height:40px; 
} 
</style> 
</head> 
<body> 
<div id="file-upload"> 
    <input size="0" name="filepc" type="file" id="filepc" /> 
</div> 
</body> 

j'utilisais l'image que l'image images/upload_file.gif (et ses dimensions respectives pour tout ce qui concerne celui-ci)

alt text

1

Il est difficile à faire et encore plus difficile à faire cross-browser. Webkit (safari/chrome) a une façon très différente de gérer cela que les IE et Mozilla. Comme indiqué, vous finirez par avoir recours à une tonne de hacks que vous devrez constamment vérifier sur chaque navigateur au fur et à mesure de leur sortie.

Une façon que j'ai trouvé est d'améliorer progressivement pour utiliser un plug-in flash. Vous avez seulement besoin de vérifier que le flash est présent et que le flashblock ne bloque pas l'élément.

Par exemple: http://www.uploadify.com/demos/ (bien que cela ne semble pas vérifier flashblock!)

Questions connexes