déclenchement d'un bouton d'entrée de fichier

Question

Je me trouve dans la situation suivante :

<input id="upload_trigger_btn" type="file" name="files[]" multiple>
<a type="submit" class="button-normal-12px-ffffff" href="#"><span>Add files</span></a>

$(".add_files_btn").bind("click", function () {
    $("#upload_trigger_btn").trigger("click");
});

Je veux donc déclencher le bouton d'entrée de fichier en utilisant un autre bouton. Cela fonctionne très bien dans firefox et IE mais le bouton ne se déclenche pas dans chrome et safari.

Answer 1

Vous pouvez créer {'visibility':'hidden'} avec height : 0px et display block, le déclencheur fonctionnerait.

Answer 2

EDITAR

Dans la plupart des cas, vous pouvez déclencher un événement de cette manière :

$(".add_files_btn").click(function(){
    $("#upload_trigger_btn").click();
});

Mais lorsqu'il s'agit de boutons de téléchargement de fichiers, quelques navigateurs (dont firefox) n'autorisent pas cette action parce qu'elle présente un risque pour la sécurité. Malheureusement, il ne semble pas y avoir de solution simple avec une fonction de clic...

Référence -> https://stackoverflow.com/a/3030174/992435

Answer 3

Je pense que vous pourriez vous en sortir :

$(".add_files_btn").unbind("click").bind("click", function () {
   $("#upload_trigger_btn").click();
});

Answer 4

      <div class="btn btn-default fileinput-button ">
      <span><i class="fa fa-cloud-upload pr-10" aria-hidden="true"></i>UPLOAD FILE</span>  
       <input id="fileupload5" type="file">
      </div>

.fileinput-button input { position: absolute; top: 0; right: 0; margin: 0; opacity: 0; -ms-filter: 'alpha(opacity=0)'; font-size: 200px; cursor: pointer; }