Bouton de téléchargement de fichier personnalisé

peut donner la possibilité de sélectionner le fichier à partir de la machine locale et de le télécharger ultérieurement. Mais je voulais un bouton personnalisé qui permette d’ouvrir la file browser dialog et de poursuivre le téléchargement en cliquant sur le bouton personnalisé. veuillez voir ci-dessous l’ exemple . Supposons

  /* file upload */  /* simple button */ 

Voici le fn jQuery qui active le bouton en tant que bouton de téléchargement de fichier.

 $(function(){ $('#customized').click(function() { /* cutomized button clicked */ $('#file-upload').click(); /* Now file upload button auto clicked & file browser dialog opens. */ }); }); 

ci-dessus, js fonctionne sur une machine Windows alors que it doesn't work on Linux, Why? De plus, je sais que l’OS n’a rien à faire et Browser en est responsable. S’il vous plaît aidez-moi à régler ce problème
Windows – -> mozila IE chrome : fonctionne, s’il vous plaît vérifier exemple

Linux ne fonctionne sur aucun navigateur

Cela concerne davantage la version du navigateur que le système d’exploitation ou la marque du navigateur.

Je pense que cela échouerait également dans Opera sous Windows, car certains navigateurs empêchent le déclenchement d’événements sur une entrée de type fichier.

Vous pouvez faire ce vieux truc CSS à la place – http://www.quirksmode.org/dom/inputfile.html

Si vous n’avez pas besoin de la barre qui affiche le nom du fichier, cela fonctionne très bien 🙂 http://jsfiddle.net/fxfPL/

 .replaced-upload-button { display: inline-block; position:relative; overflow:hidden; /*for looks only*/background: #ddd;padding: 5px; border: 1px solid #3d3d3d; } /*for looks only*/.replaced-upload-button:hover { background: orangered; color: #fff; } .original-upload-button { position: absolute; top:0; left:0; width: 9999%; margin-left: -9899%; height: 100%; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";/* IE 8 */ filter: alpha(opacity=50);/* IE 5-7 */ -moz-opacity: 0.5;/* Netscape */ -khtml-opacity: 0.5;/* Safari 1.x */ opacity: 0.5;/* Good browsers */ } .original-upload-button:hover { cursor: pointer } 

Avoir le même problème aussi récemment et vu cette page. Tomas, votre réponse est excellente et a très bien fonctionné avec des ajustements mineurs sur IE8.

Le problème sur IE8 est le texte de navigation du bouton de navigation d’origine qui chevauche le nouveau créé à l’aide du bouton de remplacement. Pour ceux qui rencontrent le même problème, vous pouvez modifier l’opacité du bouton de téléchargement d’origine sur 0:

 .original-upload-button { position: absolute; top:0; left:0; width: 9999%; margin-left: -9899%; height: 100%; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";/* IE 8 */ filter: alpha(opacity=0);/* IE 5-7 */ -moz-opacity: 0;/* Netscape */ -khtml-opacity: 0;/* Safari 1.x */ opacity: 0;/* Good browsers */ } 

Vous pouvez utiliser un autre bouton qui appellera l’événement click du bouton de téléchargement de fichier. Le bouton de téléchargement du fichier d’origine rest masqué. J’ai réutilisé le nom de classe de Tomas pour le bouton de téléchargement de fichier d’origine afin de le masquer.

Je pense que cette solution serait également intéressante si vous utilisez des contrôles de serveur (mais notez que vous devez modifier la liaison de l’événement click du contrôle de serveur).

http://jsfiddle.net/shiego926/X98yp/

J’espère que ce code aidera!