Memicu kotak dialog "pilih file" secara terprogram

Saya memiliki elemen input file tersembunyi. Apakah mungkin untuk memicu kotak dialog pilih file dari acara klik tombol?

Jika Anda ingin memiliki tombol sendiri untuk mengupload file daripada menggunakan <input type="file" />, Anda dapat melakukan sesuatu seperti:

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

Perhatikan bahwa saya menggunakan visibility: hidden, bukan display: none. Anda tidak dapat memanggil peristiwa klik pada input file yang tidak ditampilkan.

Sebagian besar jawaban di sini kurang memiliki informasi yang berguna:

Ya, Anda dapat mengklik secara terprogram elemen input menggunakan jQuery / JavaScript, tetapi hanya jika Anda melakukannya di event handler milik event YANG DIMULAI OLEH PENGGUNA!

Jadi, misalnya, tidak akan terjadi apa-apa jika Anda, skrip, secara terprogram mengklik tombol di callback ajax, tetapi jika Anda meletakkan baris kode yang sama di penangan peristiwa yang dimunculkan oleh pengguna, itu akan berfungsi.

PS Kata debugger;kunci mengganggu jendela jelajah jika sebelum klik program ... setidaknya di chrome 33 ...

Sekadar catatan, ada solusi alternatif yang tidak membutuhkan javascript. Ini sedikit hack, mengeksploitasi fakta bahwa mengklik label menetapkan fokus pada input terkait.

Anda membutuhkan <label>dengan foratribut yang tepat (menunjuk ke input), dengan gaya optionnaly seperti tombol (dengan bootstrap, gunakan btn btn-default). Saat pengguna mengklik label, dialog terbuka, contoh:

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

Saya tidak yakin bagaimana browser menangani klik pada type="file"elemen (masalah keamanan dan semuanya), tetapi ini seharusnya berfungsi:

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

Saya telah menguji JSFiddle ini di Chrome, Firefox dan Opera dan semuanya menampilkan dialog jelajah file.

Saya membungkusnya dengan input[type=file]label tag, lalu mengatur gaya labelsesuai keinginan Anda, dan menyembunyikan 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>

Solusi CSS Murni.

Secara native, satu-satunya cara adalah dengan membuat <input type="file">elemen dan kemudian mensimulasikan klik, sayangnya.

Ada plugin kecil (steker tidak tahu malu) yang akan menghilangkan rasa sakit karena harus melakukan ini sepanjang waktu: 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
        })
    })

Solusi terbaik, berfungsi di semua browser .. bahkan di seluler.

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

Menyembunyikan jenis file input menyebabkan masalah dengan browser, opacity adalah solusi terbaik karena tidak bersembunyi, hanya tidak muncul. :)

Tidak ada cara lintas browser untuk melakukannya, demi alasan keamanan. Apa yang biasanya dilakukan orang adalah melapisi file input di atas sesuatu yang lain dan mengatur visibilitasnya menjadi tersembunyi sehingga dipicu sendiri. Info selengkapnya di sini.

Pastikan Anda menggunakan binding untuk mendapatkan props komponen di 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>)
  }
}

Menggunakan jQuery Anda dapat memanggil click()untuk mensimulasikan klik.

Ini berhasil untuk saya:

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

Bagi mereka yang menginginkan hal yang sama tetapi menggunakan 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>