web-dev-qa-db-fra.com

Entrée du fichier de déclenchement JQuery

J'essaie de déclencher une boîte d'envoi (bouton Parcourir) à l'aide de jQuery.
La méthode que j'ai essayée maintenant est la suivante: 

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

Mais cela ne semble pas fonctionner. S'il vous plaît aider. Je vous remercie.

javascriptjquerycss
153
Alec Smart

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

J'ai découvert que la restriction de sécurité s'appliquait uniquement lorsque <input type="file"/> est défini sur display:none; ou est visbilty:hidden.

J'ai donc essayé de le positionner en dehors de la fenêtre d'affichage en définissant position:absolute et top:-100px; et le tour est joué.

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

appelez ça un hack.

J'espère que cela fonctionne pour vous.

187
adardesign

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;
}

>>> Autre exemple fonctionnant sur plusieurs navigateurs: <<<

L'idée est de superposer un énorme bouton invisible "Parcourir" sur votre bouton personnalisé . Ainsi, lorsque l'utilisateur clique sur votre bouton personnalisé, il clique en fait 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());
    });
});
97
sled

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>

Ceci déclenchera le fichier d'entrée

49
Jhon Rey

Je le fais fonctionner (= testé) dans IE8 +, FF récent et chrome:

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

La clé est la mise au point avant le déclic (sinon, chrome l’ignore).

Remarque: vous DEVEZ avoir votre entrée affichée et visible (comme dans, pas display:none et pas visibility:hidden) . Je suggère (comme beaucoup d’autres l’ont fait auparavant) de positionner absolument l’entrée et de la jeter de l’écran.

#uploadInput {
    position: absolute;
    left: -9999px;
}
16
The Mighty Rubber Duck

Regarde mon violon.

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

.uploadFile {
  visibility: hidden;
}

#uploadIcon {
  cursor: pointer;
}
<body>
  <div class="uploadBox">
    <label for="uploadFile" id="uploadIcon">
      <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"/>
    </label>
    <input type="file" value="upload" id="uploadFile" class="uploadFile" />
  </div>
</body>

10
Mohan

adardesign a cloué le message concernant l'élément d'entrée du fichier étant ignoré lorsqu'il est masqué. J'ai également remarqué que de nombreuses personnes passaient la taille d'élément à 0 ou la poussaient hors des limites avec des ajustements de positionnement et de débordement. Ce sont toutes de bonnes idées.
Une autre manière qui semble également fonctionner parfaitement consiste à il suffit de régler l'opacité sur 0 . Ensuite, vous pouvez toujours définir la position pour l'empêcher de décaler d'autres éléments comme le fait le cacher. Il semble tout simplement inutile de déplacer un élément de près de 10 000 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);
}
9
eyegropram

Juste par curiosité, vous pouvez faire ce que vous voulez en créant de manière dynamique un formulaire de téléchargement et un fichier d'entrée, sans l'ajouter à l'arborescence DOM:

$('.your-button').on('click', function() {
    var uploadForm = document.createElement('form');
    var fileInput = uploadForm.appendChild(document.createElement('input'));

    fileInput.type = 'file';
    fileInput.name = 'images';
    fileInput.multiple = true;

    fileInput.click();
});

Pas besoin d'ajouter l'uploadForm au DOM.

5
jairhumberto

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>
5
E9 Sistemas

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

4
Chad Grant

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

  <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émonstration des boutons d’entrée de fichier bootstrap

4
Natwar Singh

ou simplement

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

En fait, j'ai trouvé une méthode très simple pour cela:

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

De cette façon, votre champ de saisie de fichier peut avoir la propriété css display on none et néanmoins remporter l'échange :)

3
skywlkr

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

3
Valentin Galea

C'est une question très ancienne, mais malheureusement, cette question est toujours d'actualité et nécessite une solution.

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

See here:Exemple de code ici

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

En plus de cela, vous pouvez manipuler l'apparence et le comportement comme vous le souhaitez (par exemple: obtenez le nom du fichier sélectionné à partir du fichier d'entrée, après l'avoir sélectionné, et affichez-le quelque part. L'élément LABEL ne le fait pas automatiquement, bien sûr, je le mets généralement juste à l’intérieur de l’ÉTIQUETTE, comme contenu textuel).

Attention cependant! La manipulation de son apparence et de son comportement est limitée à tout ce que vous pouvez imaginer et penser. ;-) ;-)

3
TheCuBeMan

j'ai eu des problèmes avec la validation côté client personnalisée pour <input type="file"/> tout en utilisant un faux bouton pour le déclencher et la solution de @Guillaume Bodi a fonctionné pour moi (également avec 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;
}
2
Amin K

Essayez ceci, c'est un bidouillage. la position: absolute est pour Chrome et trigger ("changement") 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');
});
1
thinpiglin

Mon problème était un peu différent sur iOS 7. Il s'avère que FastClick posait problème. Tout ce que je devais faire était d’ajouter class="needsclick" à mon bouton.

1
Dex

C’est probablement la meilleure réponse, en gardant à l’esprit les problèmes de navigation entre navigateurs.

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">
0
Eddsters