Wie öffne ich den Dateiauswahldialog über js?

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

Es funktioniert nicht mit Chrome 26 unter Mac OS.

Das eigentliche Problem ist die Erstellung von „Upload“-Widgets, die in ein Formular integriert werden können. Widget besteht aus zwei Teilen. Der erste Teil ist div mit Initiator-Button und Fehler-/Erfolgsmeldungen. Ich denke, der Weg ist ein anderes Formular als der zweite Teil mit Dateieingabe und Datei in den Iframe zu senden. Nach dem Absenden füllen wir das verborgene Feld im ersten Teil des Hauptformulars aus oder zeigen Fehler darin an.

Ein einfacher Weg ist das Hinzufügen eines Dateiformulars zum Hauptformular, aber es ist verboten.

Verwendung von jQuery

Ich würde eine Schaltfläche und eine unsichtbare Eingabe wie folgt erstellen:

<button id="button">Open</button>
<input id="file-input" type="file" name="name" style="display: none;" />

und fügen Sie etwas jQuery hinzu, um es auszulösen:

$('#button').on('click', function() {
    $('#file-input').trigger('click');
});

Mit Vanilla JS

Gleiche Idee, ohne jQuery (Dank an @Pascale):

<button onclick="document.getElementById('file-input').click();">Open</button>
<input id="file-input" type="file" name="name" style="display: none;" />

Nur JS – keine Notwendigkeit für jquery

Einfach ein Eingabeelement erstellen und den Klick auslösen.

var input = document.createElement('input');
input.type="file";
input.click();

Dies ist das einfachste, öffnen Sie einen Dateiauswahldialog, aber es nützt nichts, ohne die ausgewählte Datei zu handhaben …

Umgang mit den Dateien

Hinzufügen eines onchange -Ereignis für die neu erstellte Eingabe würde es uns ermöglichen, Dinge zu tun, sobald der Benutzer die Datei ausgewählt hat.

var input = document.createElement('input');
input.type="file";

input.onchange = e => { 
   var file = e.target.files[0]; 
}

input.click();

Im Moment haben wir die Dateivariable, die verschiedene Informationen speichert:

file.name // the file's name including extension
file.size // the size in bytes
file.type // file type ex. 'application/pdf'

Toll!

Aber was, wenn wir den Inhalt der Datei brauchen?

Um an den eigentlichen Inhalt der Datei zu gelangen, aus verschiedenen Gründen. Platzieren Sie ein Bild, laden Sie es in die Leinwand, erstellen Sie ein Fenster mit einer Base64-Daten-URL usw., die wir verwenden müssten FileReader API

Wir würden eine Instanz des FileReader erstellen und unsere vom Benutzer ausgewählte Dateireferenz darauf laden.

var input = document.createElement('input');
input.type="file";

input.onchange = e => { 

   // getting a hold of the file reference
   var file = e.target.files[0]; 

   // setting up the reader
   var reader = new FileReader();
   reader.readAsText(file,'UTF-8');

   // here we tell the reader what to do when it's done reading...
   reader.onload = readerEvent => {
      var content = readerEvent.target.result; // this is the content!
      console.log( content );
   }

}

input.click();

Wenn Sie versuchen, den obigen Code in das Konsolenfenster Ihres Devtools einzufügen, sollte ein Dialogfeld zum Auswählen einer Datei angezeigt werden. Nach dem Auswählen der Datei sollte die Konsole nun den Inhalt der Datei drucken.

Beispiel – „Das neue Hintergrundbild von Stackoverflow!“

Lassen Sie uns versuchen, einen Dateiauswahldialog zu erstellen, um das Hintergrundbild von stackoverflows in etwas scharferes zu ändern …

var input = document.createElement('input');
input.type="file";

input.onchange = e => { 

   // getting a hold of the file reference
   var file = e.target.files[0]; 

   // setting up the reader
   var reader = new FileReader();
   reader.readAsDataURL(file); // this is reading as data url

   // here we tell the reader what to do when it's done reading...
   reader.onload = readerEvent => {
      var content = readerEvent.target.result; // this is the content!
      document.querySelector('#content').style.backgroundImage="url("+ content +')';
   }

}

input.click();

Öffnen Sie devtools und fügen Sie den obigen Code in das Konsolenfenster ein. Dadurch sollte ein Dialogfeld zum Auswählen einer Datei angezeigt werden. Bei der Auswahl eines Bildes sollte sich der Hintergrund des Inhaltsfelds von stackoverflows in das ausgewählte Bild ändern.

Prost!

Ready-to-Use-Funktion (mit Promise)

/**
 * Select file(s).
 * @param {String} contentType The content type of files you wish to select. For instance, use "image/*" to select all types of images.
 * @param {Boolean} multiple Indicates if the user can select multiple files.
 * @returns {Promise<File|File[]>} A promise of a file or array of files in case the multiple parameter is true.
 */
function selectFile(contentType, multiple){
    return new Promise(resolve => {
        let input = document.createElement('input');
        input.type="file";
        input.multiple = multiple;
        input.accept = contentType;

        input.onchange = () => {
            let files = Array.from(input.files);
            if (multiple)
                resolve(files);
            else
                resolve(files[0]);
        };

        input.click();
    });
}

Probieren Sie es hier aus

// Content wrapper element
let contentElement = document.getElementById("content");

// Button callback
async function onButtonClicked(){
    let files = await selectFile("image/*", true);
    contentElement.innerHTML = files.map(file => `<img src="https://stackoverflow.com/questions/16215771/${URL.createObjectURL(file)}" style="width: 100px; height: 100px;">`).join('');
}

// ---- function definition ----
function selectFile (contentType, multiple){
    return new Promise(resolve => {
        let input = document.createElement('input');
        input.type="file";
        input.multiple = multiple;
        input.accept = contentType;

        input.onchange = _ => {
            let files = Array.from(input.files);
            if (multiple)
                resolve(files);
            else
                resolve(files[0]);
        };

        input.click();
    });
}

<button onclick="onButtonClicked()">Select images</button>
<div id="content"></div>

Der Vollständigkeit halber die Lösung von Ron van der Heijden in reinem JavaScript:

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

Nur in HTML:

<label>
  <input type="file" name="input-name" style="display: none;" />
  <span>Select file</span>
</label>

Bearbeiten: Ich hatte das nicht in Blink getestet, es funktioniert eigentlich nicht mit a <button>aber es sollte mit den meisten anderen Elementen funktionieren – zumindest in neueren Browsern.

Überprüfen diese Geige mit obigem Code.

Um die Antwort von „levi“ zu erweitern und zu zeigen, wie Sie die Antwort vom Upload erhalten, damit Sie den Datei-Upload verarbeiten können:

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() {
        //
    });
}