"Dosya seç" iletişim kutusunu programlı olarak tetikler

Gizli bir dosya giriş öğem var. Dosya seçme iletişim kutusunu bir düğmenin tıklama olayından tetiklemek mümkün müdür ?

Kullanmak yerine dosya yüklemek için kendi düğmenizin olmasını <input type="file" />istiyorsanız, aşağıdaki gibi bir şey yapabilirsiniz:

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

visibility: hiddenBunun yerine kullandığımı unutmayın display: none. Görüntülenmeyen bir dosya girişinde tıklama olayını çağıramazsınız.

Buradaki yanıtların çoğu yararlı bilgilerden yoksundur:

Evet, jQuery / JavaScript kullanarak giriş öğesini programlı olarak tıklayabilirsiniz, ancak bunu yalnızca KULLANICI TARAFINDAN BAŞLATILMIŞ bir olaya ait bir olay işleyicisinde yaparsanız!

Yani, örneğin, siz, komut dosyası, ajax geri aramasında programlı olarak düğmeye tıklarsanız hiçbir şey olmaz, ancak aynı kod satırını kullanıcı tarafından oluşturulan bir olay işleyicisine koyarsanız, işe yarayacaktır.

PS debugger;Anahtar sözcük, programlı tıklamadan önceyse gözatma penceresini bozar ... en azından krom 33 ...

Sadece kayıt için, javascript gerektirmeyen alternatif bir çözüm var. Bir etikete tıklamanın ilgili girdiye odaklanmayı ayarlaması gerçeğinden yararlanarak, biraz hacklemektir.

Bir ihtiyaç <label>uygun olan for(bootstrap ile, kullanım Optionnaly bir düğme gibi tarz öznitelik (girişine puan), btn btn-default). Kullanıcı etiketi tıkladığında, iletişim kutusu açılır, örneğin:

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

Tarayıcıların type="file"öğelere yapılan tıklamaları nasıl işlediğinden emin değilim (güvenlik endişeleri ve hepsi), ancak bu işe yaramalı:

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

Bu JSFiddle'ı Chrome, Firefox ve Opera'da test ettim ve hepsi dosya tarama iletişim kutusunu gösteriyor.

Ben sarmak input[type=file], bir etiket etiketi sonra stilini labelbeğeninize ve gizlemek 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>

Tamamen CSS Çözümü.

Doğal olarak tek yol, bir <input type="file">öğe oluşturmak ve maalesef bir tıklamayı simüle etmektir .

Bunu her zaman yapmak zorunda kalmanın acısını ortadan kaldıracak küçük bir eklenti (utanmaz eklenti) var: 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
        })
    })

En iyi çözüm, mobil cihazlarda bile tüm tarayıcılarda çalışır.

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

Girdi dosyası türünü gizlemek tarayıcılarda sorunlara neden olur, opaklık en iyi çözümdür çünkü gizlenmez, sadece gösterilmez. :)

Güvenlik nedeniyle tarayıcılar arası bunu yapmanın bir yolu yoktur. İnsanların genellikle yaptığı şey, girdi dosyasını başka bir şeyin üzerine yerleştirmek ve görünürlüğünü gizli olarak ayarlamak, böylece kendi başına tetiklenmesini sağlamaktır. Daha fazla bilgi burada.

REACT'ta bileşen sahne almak için bağlama kullandığınızdan emin olun

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 kullanarak click()bir tıklamayı simüle etmek için arama yapabilirsiniz .

Bu benim için çalıştı:

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

Aynısını isteyen ancak React'i kullananlar için

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>