Comment ouvrir une boîte de dialogue de sélection de fichier via js ?

Question

$('#id').click();

Il ne fonctionne pas sur Chrome 26 sur Mac OS.

Le problème est en fait la création d'un widget "upload" qui peut être intégré dans un formulaire. Le widget sera composé de deux parties. La première partie est un div avec un bouton d'initialisation et des messages d'erreur/succès. Je pense que le moyen est de mettre un autre formulaire comme la deuxième partie avec l'entrée de fichier et de soumettre le fichier dans l'iframe. Après la soumission, nous remplissons le champ caché dans la première partie du formulaire principal ou nous montrons les erreurs dans le même formulaire.

Le moyen le plus simple est d'ajouter le formulaire de fichier au formulaire principal, mais c'est interdit.

Answer 1

Pour développer la réponse de 'levi' et montrer comment obtenir la réponse du téléchargement afin de pouvoir traiter le téléchargement du fichier :

selectFile(event) {
    event.preventDefault();

    file_input = document.createElement('input');
    file_input.addEventListener("change", uploadFile, false);
    file_input.type = 'file';
    file_input.click();
},

uploadFile() {
    let dataArray = new FormData();
    dataArray.append('file', file_input.files[0]);

    // Obviously, you can substitute with JQuery or whatever
    axios.post('/your_super_special_url', dataArray).then(function() {
        //
    });
}

Answer 2

function promptFile(contentType, multiple) {
  var input = document.createElement("input");
  input.type = "file";
  input.multiple = multiple;
  input.accept = contentType;
  return new Promise(function(resolve) {
    document.activeElement.onfocus = function() {
      document.activeElement.onfocus = null;
      setTimeout(resolve, 500);
    };
    input.onchange = function() {
      var files = Array.from(input.files);
      if (multiple)
        return resolve(files);
      resolve(files[0]);
    };
    input.click();
  });
}
function promptFilename() {
  promptFile().then(function(file) {
    document.querySelector("span").innerText = file && file.name || "no file selected";
  });
}

<button onclick="promptFilename()">Open</button>
<span></span>

Answer 3

Déclarer d'abord une variable pour stocker les noms de fichiers (pour les utiliser plus tard) :

var myfiles = [];

Boîte de dialogue Ouvrir un fichier

$('#browseBtn').click(function() {
    $('<input type="file" multiple>').on('change', function () {
        myfiles = this.files; //save selected files to the array
        console.log(myfiles); //show them on console
    }).click();
});

Je le poste, afin que cela puisse aider quelqu'un, car il n'y a pas d'instructions claires sur internet sur la façon de stocker les noms de fichiers dans un tableau !

Answer 4

Avec la bibliothèque jquery

<button onclick="$('.inputFile').click();">Select File ...</button>
<input class="inputFile" type="file" style="display: none;">

Answer 5

Ce problème m'a laissé perplexe. L'ajout de addeventlistener invoquait l'événement, ce que je ne voulais pas. Si vous êtes intéressé par un simple sélecteur, les événements ne sont pas nécessaires. La boîte de dialogue de saisie/fichier retournera de la fenêtre séparée à l'appelant avec le nom de fichier sélectionné (si vous regardez l'élément dans un débogueur, l'objet "files" porte également d'autres attributs. Merci à user4602228 d'avoir indiqué le chemin...

Sélecteur de fichier simple d'entrée/sortie montré ci-dessous >>>

function loadsettings()
//
// use web page dialog to get user settings file
//
{
   var setload=parent.settings.document.createElement("input");
   setload.type="file";
   setload.click();
   settings(*setload.files[0]*,false,false); //these are custom parameters 
}
return;