Intereting Posts

Comment obtenir la taille de la fenêtre de la vue plein écran (minimum-ui) lorsqu'elle n'est pas en plein écran? Comment appeler une méthode Objective-C de Javascript dans une application Cocoa / WebKit? Outil pour écrire un code javascript Bouclez une requête asynchrone Réduire le tableau à un en regroupant des objets ayant la même propriété Comment passer les paramètres dans l'événement de chargement d'image? Javascript utilisant 'this' dans l'objet global Regex négatif regarde autour de 2 matchs adjacents Intentionnellement "gelant" une variable javascript en utilisant une fonction d'auto-exécution Comment valider une entrée utilisateur de temps comme hh: mm à hh: mm en javascript? Qu'est-ce qui rend compensateur null? Tableau de force d3.js à l'intérieur d'un triangle Comment obtenir les enfants du $ (ce) sélecteur? Comment trouver un élément sans identification d'utilisation OpenLayers n'utilise pas le thème CSS?

Entrée du fichier déclencheur Jquery

Essaye de déclencher une boîte de téléchargement (bouton de navigation) en utilisant jQuery.
La méthode que j'ai essayée maintenant est:

$('#fileinput').trigger('click');

Mais cela ne semble pas fonctionner. Aidez-nous. Je vous remercie.

Ceci est dû à une restriction de sécurité.

J'ai découvert que la restriction de sécurité est seulement lorsque <input type="file"/> est configuré pour l' display:none; Ou est visbilty:hidden .

J'ai donc essayé de le positionner en dehors de la fenêtre en définissant la position:absolute et top:-100px; Et voilà il fonctionne.

Voir http://jsfiddle.net/DSARd/1/

Appelez-le un hack.

J'espère que cela fonctionne pour vous.

Cela a fonctionné pour moi:

JS:

 $('#fileinput').trigger('click');

HTML:

 <div class="hiddenfile"> <input name="upload" type="file" id="fileinput"/> </div>

CSS:

 .hiddenfile { width: 0px; height: 0px; overflow: hidden; }

>>> Un autre qui fonctionne Cross-Browser: <<<

L'idée est que vous superposez un bouton "Parcourir" énorme invisible sur votre bouton personnalisé. Donc, lorsque l'utilisateur clique sur votre bouton personnalisé, il clique en cliquant sur le bouton "Parcourir" du champ de saisie natif.

JS Fiddle: http://jsfiddle.net/5Rh7b/

HTML:

 <div id="mybutton"> <input type="file" id="myfile" name="upload"/> Click Me! </div>

CSS:

 div#mybutton { /* IMPORTANT STUFF */ overflow: hidden; position: relative; /* SOME STYLING */ width: 50px; height: 28px; border: 1px solid green; font-weight: bold background: red; } div#mybutton:hover { background: green; } input#myfile { height: 30px; cursor: pointer; position: absolute; top: 0px; right: 0px; font-size: 100px; z-index: 2; opacity: 0.0; /* Standard: FF gt 1.5, Opera, Safari */ filter: alpha(opacity=0); /* IE lt 8 */ -ms-filter: "alpha(opacity=0)"; /* IE 8 */ -khtml-opacity: 0.0; /* Safari 1.x */ -moz-opacity: 0.0; /* FF lt 1.5, Netscape */ }

JavaScript:

 $(document).ready(function() { $('#myfile').change(function(evt) { alert($(this).val()); }); });

Vous pouvez utiliser l'élément LABEL ex.

 <div> <label for="browse">Click Me</label> <input type="file" id="browse" name="browse" style="display: none">// </div>

Cela déclenchera le fichier d'entrée

Je l'ai travaillé (= testé) dans IE8 +, FF récents et chrome:

 $('#uploadInput').focus().trigger('click');

La clé se concentre avant de déclencher le clic (sinon chrome l'ignore).

Remarque: vous NÉCESSITE d'avoir votre entrée affichée et visible (comme dans, ne pas display:none et pas de visibility:hidden ). Je suggère (comme beaucoup d'autres ont déjà) de positionner absolument l'entrée et de la jeter hors de l'écran.

 #uploadInput { position: absolute; left: -9999px; }

Regardez mon violon …

http://jsfiddle.net/mohany2712/vaw8k/

HTML:

 <body> <div class="uploadBox"> <a href="javascript:void(0)" id="uploadIcon" href=""> <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/3/34/Icon_-_upload_photo_2.svg/512px-Icon_-_upload_photo_2.svg.png" width="20px" height="20px"/> </a> <input type="file" value="upload" id="uploadFile" class="uploadFile" /> </div> </body>

Javascript:

 $("#uploadIcon").click(function(){ $(this).next().trigger('click'); });

CSS:

 .uploadFile { visibility : hidden; }

C'est vraiment simple.

Adardesign l'a cloué concernant l'élément de saisie de fichier ignoré lorsqu'il est caché. J'ai également remarqué que de nombreuses personnes ont déplacé la taille de l'élément à 0, ou la poussent hors limites avec des ajustements de positionnement et de débordement. Ce sont toutes des idées formidables.
Une façon alternative qui semble également fonctionner parfaitement est de configurer l'opacité à 0 . Ensuite, vous pouvez toujours définir la position pour éviter de compenser d'autres éléments en tant que cache. Il semble tout simplement inutile de déplacer un élément de près de 10K pixels dans n'importe quelle direction.

Voici un petit exemple pour ceux qui en veulent un:

 input[type='file']{ position:absolute; opacity:0; /* For IE8 "Keep the IE opacity settings in this order for max compatibility" */ -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* For IE5 - 7 */ filter: alpha(opacity=0); }

Code correct:

 <style> .upload input[type='file']{ position: absolute; float: left; opacity: 0; /* For IE8 "Keep the IE opacity settings in this order for max compatibility" */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* For IE5 - 7 */ filter: alpha(opacity=0); width: 100px; height: 30px; z-index: 51 } .upload input[type='button']{ width: 100px; height: 30px; z-index: 50; } .upload input[type='submit']{ display: none; } .upload{ width: 100px; height: 30px } </style> <div class="upload"> <input type='file' ID="flArquivo" onchange="upload();" /> <input type="button" value="Selecionar" onchange="open();" /> <input type='submit' ID="btnEnviarImagem" /> </div> <script type="text/javascript"> function open() { $('#flArquivo').click(); } function upload() { $('#btnEnviarImagem').click(); } </script>

C'est à dessein et par conception. C'est un problème de sécurité.

J'ai réussi avec un simple $ (…). Click (); Avec JQuery 1.6.1

Ou simplement simplement

 $(':input[type="file"]').show().click().hide();

Il est trop tard pour répondre, mais je pense que cette configuration minimale fonctionne mieux. Je cherche aussi la même chose.

  <div class="btn-file"> <input type="file" class="hidden-input"> Select your new picture </div>

// css

 .btn-file { display: inline-block; padding: 8px 12px; cursor: pointer; background: #89f; color: #345; position: relative; overflow: hidden; } .btn-file input[type=file] { position: absolute; top: 0; right: 0; min-width: 100%; min-height: 100%; filter: alpha(opacity=0); opacity: 0; cursor: inherit; display: block; }

Jsbin

Démarrage des boutons d'entrée du fichier bootstrap

En fait, j'ai découvert une méthode très simple pour cela, à savoir:

 $('#fileinput').show().trigger('click').hide();

De cette façon, votre champ de saisie de fichier peut avoir l' affichage de la propriété css sur aucun et toujours gagner le commerce 🙂

C'est une question très ancienne, mais malheureusement cette question reste pertinente et nécessite une solution.

La solution (étonnamment simple) que j'ai proposée consiste à "cacher" le champ de saisie du fichier réel et à l'envelopper avec une étiquette LABEL (peut être basée sur Bootstrap et HTML5, pour l'amélioration).

See here: Exemple de code ici

De cette façon, le champ de saisie de fichier réel est invisible et tout ce que vous voyez est le «bouton» personnalisé qui est en fait un élément de LABEL modifié. Lorsque vous cliquez sur cet élément LABEL, la fenêtre de sélection d'un fichier apparaît et le fichier que vous choisissez entrera dans le champ de saisie du fichier réel.

En plus de cela, vous pouvez manipuler l'apparence et le comportement comme vous le souhaitez (par exemple: obtenir le nom du fichier sélectionné à partir du fichier de saisie du fichier, après avoir été sélectionné et le montrer quelque part. L'élément LABEL ne le fait pas automatiquement, Bien sûr, je l'ai simplement placé dans l'ÉTIQUETTE, en tant que contenu du texte).

Attention! La manipulation de l'apparence et du comportement de ceci est limitée à tout ce que vous pouvez imaginer et penser. 😉 😉

Essayez ceci, c'est un hack. La position: absolu est pour Chrome et déclencheur ('changer') est pour IE.

 var hiddenFile = $("<input type=\"file\" name=\"file\" id=\"file1\" style=\"position:absolute;left:-9999px\" />"); $('body').append(hiddenFile); $('#aPhotoUpload').click(function () { hiddenFile.trigger('click'); if ($.browser.msie) hiddenFile.trigger('change'); }); hiddenFile.change(function (e) { alert('TODO'); });

Mon problème était un peu différent sur iOS 7. Il se révèle que FastClick a causé des problèmes. Tout ce que je devais faire était d'ajouter class="needsclick" à mon bouton.

C'est probablement la meilleure réponse, en gardant à l'esprit les problèmes de navigation croisée.

CSS:

 #file { opacity: 0; width: 1px; height: 1px; }

JS:

 $(".file-upload").on('click',function(){ $("[name='file']").click(); });

HTML:

 <a class="file-upload">Upload</a> <input type="file" name="file">

J'ai eu des problèmes avec la validation personnalisée du côté client pour <input type="file"/> en utilisant un faux bouton pour le déclencher et la solution @Guillaume Bodi a fonctionné pour moi (également avec l' opacity: 0; sur chrome)

 $("#MyForm").on("click", "#fake-button", function () { $("#uploadInput").focus().trigger("click"); });

Et style css pour l'entrée de téléchargement

 #uploadInput { opacity: 0.0; filter: alpha(opacity=0); /* IE lt 8 */ -ms-filter: "alpha(opacity=0)"; /* IE 8 */ -khtml-opacity: 0.0; /* Safari 1.x */ -moz-opacity: 0.0; }

Pour des raisons de curiosité, vous pouvez faire quelque chose comme vous le souhaitez en créant dynamiquement un formulaire de chargement et un fichier d'entrée, sans l'ajouter à l'arborescence DOM:

 $('.your-button').on('click', function() { var uploadForm = doucument.createElement('form'); var fileInput = uploadForm.appendChild(doucument.createElement('input')); fileInput.type = 'file'; fileInput.name = 'images'; fileInput.multiple = true; fileInput.click(); });

Pas besoin d'ajouter le format de téléchargement au DOM.

Sur la base de la réponse de Guillaume Bodi, je l'ai fait:

 $('.fileinputbar-button').on('click', function() { $('article.project_files > header, article.upload').show(); $('article.project_files > header, article.upload header').addClass('active'); $('.file_content, article.upload .content').show(); $('.fileinput-button input').focus().click(); $('.fileinput-button').hide(); });

Ce qui signifie qu'il est caché pour commencer et ensuite affiché pour le déclencheur, puis caché immédiatement.