67 votes

Comment ouvrir un fichier / un dialogue de navigation en utilisant le javascript ?

Existe-t-il un moyen d'ouvrir la boîte de dialogue de recherche de fichiers lorsqu'une <a href> Le lien est cliqué en utilisant le javascript ? Il doit fonctionner comme un bouton normal de recherche de fichiers et donner les noms/listes des fichiers sélectionnés en réponse.

3voto

xavierskip Points 356

Vous ne pouvez pas utiliser input.click() directement, mais vous pouvez l'appeler dans l'événement de clic d'un autre élément.

html

<input type="file">
<button>Select file</button>

js

var botton = document.querySelector('button');
var input = document.querySelector('input');
botton.addEventListener('click', function (e) {
    input.click();
});

cela vous dit [Utilisation d'éléments de saisie de fichiers cachés à l'aide de la méthode click()](https://developer.mozilla.org/en/docs/Using_files_from_web_applications#Using_hidden_file_input_elements_using_the_click()_method)

0voto

Sandro Rosa Points 1

J'ai travaillé autour de cette div "cachant" ...

<div STYLE="position:absolute;display:none;"><INPUT type='file' id='file1' name='files[]'></div>

0voto

Alireza Points 40192

Et si on faisait en sorte que le fait de cliquer sur le une étiquette de cliquer sur le bouton du fichier ?

Il y a plus de support de navigateur pour ceci, mais j'utilise ES6 Donc, si vous voulez vraiment le faire fonctionner dans les anciens navigateurs, essayez de le transposer en utilisant babel, ou utilisez tout simplement ES5 :

const aTag = document.getElementById("open-file-uploader");
const fileInput = document.getElementById("input-button");
aTag.addEventListener("click", () => fileInput.click());

#input-button {
  position: abosulte;
  width: 1px;
  height: 1px;
  clip: rect(1px 1px 1px 1px);
  clip: rect(1px, 1px, 1px, 1px);
}

<a href="#" id="open-file-uploader">Open file uploader</a>
<input type="file" id="input-button" />

-2voto

JJ. Points 29

Je sais qu'il s'agit d'un ancien article, mais une autre option simple consiste à utiliser la balise INPUT TYPE="FILE". Selon la compatibilité, la plupart des principaux navigateurs prennent en charge cette fonctionnalité.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X