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

Question

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.

Answer 1

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

<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" />

Answer 2

Utilisez ça.

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

Answer 3

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

Il manque dans ces réponses la façon d'obtenir un dialogue de fichier sans élément de saisie sur la page.

La fonction permettant d'afficher la boîte de dialogue du 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")); 
}

NOTE la fonction doit faire partie d'une activation de l'utilisateur, comme un événement de clic. Les tentatives d'ouverture de la boîte de dialogue de fichier sans activation par l'utilisateur échoueront.

NOTE input.accept n'est pas utilisé dans Edge

Exemple.

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>

_{<strong>Avertissement </strong>l'extrait ci-dessus est écrit en ES6.}

Answer 4

Malheureusement, il n'existe pas de bon moyen de rechercher des fichiers avec une API JavaScript. Heureusement, il est facile de créer une entrée de fichier en JavaScript, de lier un gestionnaire d'événements à son nom et à son adresse. change et 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.

Answer 5

Voici une méthode qui permet de le faire sans Javascript et qui est également compatible avec tous les navigateurs.

---

EDIT : Dans Safari, le input est désactivé lorsqu'il est masqué avec display: none . Une meilleure approche serait d'utiliser position: fixed; top: -100em .

---

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

En outre, si vous préférez, vous pouvez aller à la "la manière correcte" en utilisant for dans le label pointant vers le id de l'entrée comme ceci :

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