Programmgesteuert das Dialogfeld "Datei auswählen" auslösen

Ich habe ein verstecktes Dateieingabeelement. Ist es möglich, das Dialogfeld " Datei auswählen" über das Klickereignis einer Schaltfläche auszulösen ?

Wenn Sie eine eigene Schaltfläche zum Hochladen einer Datei haben möchten, anstatt diese zu verwenden <input type="file" />, können Sie Folgendes tun:

<input id="myInput" type="file" style="visibility:hidden" />
<input type="button" value="Show Dialog" onclick="$('#myInput').click();" />

Beachten Sie, dass ich visibility: hiddenanstelle von verwendet habe display: none. Sie können das Klickereignis nicht für eine nicht angezeigte Dateieingabe aufrufen.

Den meisten Antworten fehlen nützliche Informationen:

Ja, Sie können programmgesteuert mit jQuery / JavaScript auf das Eingabeelement klicken, aber nur, wenn Sie dies in einem Ereignishandler tun, der zu einem Ereignis gehört, das vom Benutzer gestartet wurde!

So passiert beispielsweise nichts, wenn Sie als Skript programmgesteuert auf die Schaltfläche in einem Ajax-Rückruf klicken. Wenn Sie jedoch dieselbe Codezeile in einen vom Benutzer ausgelösten Ereignishandler einfügen, funktioniert dies.

PS Das debugger;Schlüsselwort unterbricht das Suchfenster, wenn es vor dem programmatischen Klick steht ... zumindest in Chrome 33 ...

Nur für die Aufzeichnung gibt es eine alternative Lösung, die kein Javascript erfordert. Es ist ein bisschen wie ein Hack, der die Tatsache ausnutzt, dass das Klicken auf ein Etikett den Fokus auf die zugehörige Eingabe legt.

Sie benötigen ein Attribut <label>mit einem geeigneten forAttribut (zeigt auf die Eingabe), das optional wie eine Schaltfläche gestaltet ist (mit Bootstrap verwenden btn btn-default). Wenn der Benutzer auf die Beschriftung klickt, wird der Dialog geöffnet. Beispiel:

<!-- optionnal, to add a bit of style -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>

<!-- minimal setup -->
<label for="exampleInput" class="btn btn-default">
  Click me
</label>
<input type="file" id="exampleInput" style="display: none" />

Ich bin nicht sicher, wie Browser mit Klicks auf type="file"Elemente umgehen (Sicherheitsbedenken und alles), aber das sollte funktionieren:

$('input[type="file"]').click();

Ich habe diese JSFiddle in Chrome, Firefox und Opera getestet und alle zeigen den Dialog zum Durchsuchen von Dateien.

Ich wickle das input[type=file]in ein Etiketten-Tag ein, gestalte es dann labelnach Ihren Wünschen und verstecke das input.

<label class="btn btn-default fileLabel" data-toggle="tooltip" data-placement="top" title="Upload">
    <input type="file">
    <span><i class="fa fa-upload"></i></span>
</label>

<style>
    .fileLabel input[type="file"] {
        position: fixed;
        top: -1000px;
    }
</style>

Rein CSS-Lösung.

Nativ besteht der einzige Weg darin, ein <input type="file">Element zu erstellen und dann leider einen Klick zu simulieren.

Es gibt ein winziges Plugin (schamloses Plugin), das Ihnen die Mühe nimmt, dies ständig tun zu müssen: Dateidialog

fileDialog()
    .then(file => {
        const data = new FormData()
        data.append('file', file[0])
        data.append('imageName', 'flower')

        // Post to server
        fetch('/uploadImage', {
            method: 'POST',
            body: data
        })
    })

Die beste Lösung funktioniert in allen Browsern .. auch auf Mobilgeräten.

<div class="btn" id="s_photo">Upload</div>

<input type="file" name="s_file" id="s_file" style="opacity: 0;">';

<!--jquery-->

<script>
    $("#s_photo").click(function() {
        $("#s_file").trigger("click");
    });
</script>

Das Ausblenden des Eingabedateityps führt zu Problemen mit Browsern. Die Deckkraft ist die beste Lösung, da sie nicht ausgeblendet, sondern nur nicht angezeigt wird. :) :)

Aus Sicherheitsgründen gibt es keine browserübergreifende Methode. Normalerweise wird die Eingabedatei über etwas anderes gelegt und die Sichtbarkeit auf "Ausgeblendet" gesetzt, damit sie von selbst ausgelöst wird. Mehr Infos hier.

Stellen Sie sicher, dass Sie die Bindung verwenden, um Komponenten-Requisiten in REACT abzurufen

class FileUploader extends Component {
  constructor (props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }
   onChange=(e,props)=>{
    const files = e.target.files;
    const selectedFile = files[0];
    ProcessFileUpload(selectedFile,props.ProgressCallBack,props.ErrorCallBack,props.CompleatedCallBack,props.BaseURL,props.Location,props.FilesAllowed);
  }
   handleClick = () => {
    this.refs.fileUploader.click();
  }
  render()
  {
  return(
      <div>
        <button type="button" onClick={this.handleClick}>Select File</button>  
        <input type='file' onChange={(e)=>this.onChange(e,this.props)} ref="fileUploader" style={{display:"none"}} />
      </div>)
  }
}

Mit jQuery können Sie click()einen Klick simulieren.

Das hat bei mir funktioniert:

$('#fileInput').val('');

Für diejenigen, die dasselbe wollen, aber React verwenden

openFileInput = () => {
    this.fileInput.click()
}

<a href="#" onClick={this.openFileInput}>
    <p>Carregue sua foto de perfil</p>
    <img src={img} />
</a>
<input style={{display:'none'}} ref={(input) => { this.fileInput = input; }} type="file"/>

<div id="uploadButton">UPLOAD</div>
<form action="[FILE_HANDLER_URL]" style="display:none">
     <input id="myInput" type="file" />
</form>
<script>
  const uploadButton = document.getElementById('uploadButton');
  const myInput = document.getElementById('myInput');

  uploadButton.addEventListener('click', () => {
    myInput.click();
  });
</script>