web-dev-qa-db-fra.com

Comment ouvrir une boîte de dialogue de fichier/navigation à l'aide de javascript?

Est-il possible d'ouvrir la boîte de dialogue de recherche de fichiers lorsqu'un clic sur le lien <a href> à l'aide de javascript est effectué? Il devrait fonctionner comme un bouton de recherche normale de fichiers et donner les noms/la liste des fichiers sélectionnés en réponse.

javascriptjquery
47
Click Upvote

Voici une solution non-jQuery. Notez que vous ne pouvez pas simplement utiliser .click() car certains navigateurs ne le prennent pas en charge.

<script type="text/javascript">
function performClick(elemId) {
   var elem = document.getElementById(elemId);
   if(elem && document.createEvent) {
      var evt = document.createEvent("MouseEvents");
      evt.initEvent("click", true, false);
      elem.dispatchEvent(evt);
   }
}
</script>
<a href="#" onclick="performClick('theFile');">Open file dialog</a>
<input type="file" id="theFile" />
53
Samuel Liew

Utilisez ceci.

<script>
  function openFileOption()
{
  document.getElementById("file1").click();
}
</script>
     <input type="file" id="file1" style="display:none">
     <a href="#" onclick="openFileOption();return;">open File Dialog</a>
18
birendra

Malheureusement, il n'existe pas de moyen efficace de rechercher des fichiers avec une API JavaScript. Heureusement, il est facile de créer un fichier d'entrée en JavaScript, de lier un gestionnaire d'événements à son événement change et de simuler un utilisateur qui clique dessus. Nous pouvons le faire sans modifier la page elle-même:

$('<input type="file" multiple>').on('change', function () {
  console.log(this.files);
}).click();

this.files sur la deuxième ligne est un tableau qui contient le nom du fichier, les horodatages, la taille et le type.

11
Brad

Créer un élément d'entrée.

Il manque à ces réponses comment obtenir un dialogue de fichier sans élément d'entrée sur la page.

La fonction pour afficher le dialogue de fichier d'entrée. 

function openFileDialog (accept, callback) {  // this function must be called from  a user
                                              // activation event (ie an onclick event)

    // Create an input element
    var inputElement = document.createElement("input");

    // Set its type to file
    inputElement.type = "file";

    // Set accept to the file types you want the user to select. 
    // Include both the file extension and the mime type
    inputElement.accept = accept;

    // set onchange event to call callback when user has selected file
    inputElement.addEventListener("change", callback)

    // dispatch a click event to open the file dialog
    inputElement.dispatchEvent(new MouseEvent("click")); 
}

NOTEla fonction doit faire partie d'une activation utilisateur telle qu'un événement de clic. Tenter d'ouvrir la boîte de dialogue de fichier sans l'activation de l'utilisateur échouera.

NOTEinput.accept n'est pas utilisé dans Edge

Exemple.

L'appel de la fonction ci-dessus lorsque l'utilisateur clique sur un élément d'ancrage.

// wait for window to load
window.addEventListener("load", windowLoad);

// open a dialog function
function openFileDialog (accept, multy = false, callback) { 
    var inputElement = document.createElement("input");
    inputElement.type = "file";
    inputElement.accept = accept; // Note Edge does not support this attribute
    if (multy) {
        inputElement.multiple = multy;
    }
    if (typeof callback === "function") {
         inputElement.addEventListener("change", callback);
    }
    inputElement.dispatchEvent(new MouseEvent("click")); 
}

// onload event
function windowLoad () {
    // add user click event to userbutton
    userButton.addEventListener("click", openDialogClick);
}

// userButton click event
function openDialogClick () {
    // open file dialog for text files
    openFileDialog(".txt,text/plain", true, fileDialogChanged);
}

// file dialog onchange event handler
function fileDialogChanged (event) {
    [...this.files].forEach(file => {
        var div = document.createElement("div");
        div.className = "fileList common";
        div.textContent = file.name;
        userSelectedFiles.appendChild(div);
    });
}
.common {
    font-family: sans-serif;
    padding: 2px;
    margin : 2px;
    border-radius: 4px;
 }
.fileList {
    background: #229;
    color: white;
}
#userButton {
    background: #999;
    color: #000;
    width: 8em;
    text-align: center;
    cursor: pointer;
}

#userButton:hover {
   background : #4A4;
   color : white;
}
<a id = "userButton" class = "common" title = "Click to open file selection dialog">Open file dialog</a>
<div id = "userSelectedFiles" class = "common"></div>

Attention L'extrait ci-dessus est écrit en ES6.

9
Blindman67

Voici une façon de le faire sans Javascript et compatible avec tous les navigateurs.

EDIT: Dans Safari, la input est désactivée lorsqu'elle est masquée avec display: none. Une meilleure approche consisterait à utiliser position: fixed; top: -100em.

<label>
  Open file dialog
  <input type="file" style="position: fixed; top: -100em">
</label>

De même, si vous préférez, vous pouvez utiliser le "chemin correct" en utilisant for dans label en pointant sur id de l'entrée comme ceci:

<label for="inputId">file dialog</label>
<input id="inputId" type="file" style="position: fixed; top: -100em">
9
JP de la Torre

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

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

this tell you Utilisation d'éléments de saisie de fichier cachés à l'aide de la méthode click ()

1
xavierskip

Je l'ai travaillé à travers ce div "cacher" ...

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

Pourquoi ne pas cliquer sur le bouton une balise pour cliquer sur le bouton du fichier?

Cela prend davantage en charge les navigateurs, mais j'utilise ES6 , donc si vous voulez vraiment le faire fonctionner dans les navigateurs plus anciens et tous les navigateurs, essayez de le transpiler avec babel, ou utilisez 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" />

0
Alireza

Je sais que ceci est un ancien message, mais une autre option simple consiste à utiliser la balise INPUT TYPE = "FILE" en fonction de la compatibilité, la plupart des navigateurs principaux prenant en charge cette fonctionnalité.

0
JJ.