プログラムで「ファイルの選択」ダイアログボックスをトリガーする

隠しファイルinput要素があります。ボタンのクリックイベントからファイル選択ダイアログボックスをトリガーすることは可能ですか？

を使用する代わりに、ファイルをアップロードするための独自のボタン<input type="file" />が必要な場合は、次のようにします。

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

のvisibility: hidden代わりにを使用したことに注意してくださいdisplay: none。表示されていないファイル入力でクリックイベントを呼び出すことはできません。

ここでのほとんどの回答には有用な情報が不足しています：

はい、jQuery / JavaScriptを使用してプログラムでinput要素をクリックできますが、これは、ユーザーが開始したイベントに属するイベントハンドラーでクリックした場合のみです。

したがって、たとえば、スクリプトでajaxコールバックのボタンをプログラムでクリックしても何も起こりませんが、ユーザーが発生させたイベントハンドラーに同じコード行を配置すると機能します。

PSこのdebugger;キーワードは、プログラムによるクリックの前にある場合、参照ウィンドウを中断します...少なくともChrome 33では...

参考までに、JavaScriptを必要としない代替ソリューションがあります。これは少しハックであり、ラベルをクリックすると関連する入力にフォーカスが設定されるという事実を悪用します。

あなたは必要とする<label>適切にfor（ブートストラップと、使用optionnalyボタンのようなスタイル属性（入力へのポイント）、 btn btn-default）。ユーザーがラベルをクリックすると、ダイアログが開きます。例：

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

ブラウザがtype="file"要素のクリック（セキュリティ上の問題など）をどのように処理するかはわかりませんが、これは機能するはずです。

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

私はこのJSFiddleをChrome、Firefox、Operaでテストしましたが、すべてファイル参照ダイアログが表示されます。

をラベルタグで囲み、好みに合わせてinput[type=file]スタイルを設定しlabel、を非表示にし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>

純粋にCSSソリューション。

本来、唯一の方法は<input type="file">、残念ながら要素を作成し、クリックをシミュレートすることです。

小さなプラグイン（恥知らずなプラグイン）があり、これをいつもやらなければならないという苦痛を取り除きます：file-dialog

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

最善の解決策は、すべてのブラウザで動作します。モバイルでも。

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

入力ファイルタイプを非表示にすると、ブラウザで問題が発生します。非表示ではなく表示されないため、不透明度が最適なソリューションです。:)

セキュリティ上の理由から、ブラウザ間で実行する方法はありません。人々が通常行うことは、入力ファイルを他のものの上にオーバーレイし、その可視性を非表示に設定して、それ自体でトリガーされるようにすることです。詳細はこちら。

バインディングを使用してREACTでコンポーネントの小道具を取得していることを確認してください

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

jQueryを使用してclick()、クリックをシミュレートするために呼び出すことができます。

これは私のために働きました：

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

同じものが欲しいが、Reactを使用している人のために

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>