Programowo uruchom okno dialogowe „wybierz plik”

Mam ukryty element wejściowy pliku. Czy możliwe jest wywołanie okna dialogowego wyboru pliku ze zdarzenia kliknięcia przycisku?

Jeśli chcesz mieć własny przycisk do przesyłania pliku zamiast używania go <input type="file" />, możesz zrobić coś takiego:

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

Zauważ, że użyłem visibility: hiddenzamiast display: none. Nie można wywołać zdarzenia kliknięcia w przypadku niewidocznego pliku wejściowego.

W większości odpowiedzi brakuje tu przydatnych informacji:

Tak, możesz programowo kliknąć element wejściowy za pomocą jQuery / JavaScript, ale tylko wtedy, gdy robisz to w module obsługi zdarzeń należącym do zdarzenia, które ZACZĘŁO UŻYTKOWNIK!

Na przykład nic się nie stanie, jeśli ty, skrypt, programowo klikniesz przycisk w wywołaniu zwrotnym Ajax, ale jeśli umieścisz tę samą linię kodu w module obsługi zdarzeń, który został wywołany przez użytkownika, zadziała.

PS debugger;Słowo kluczowe zakłóca okno przeglądarki, jeśli znajduje się przed programowym kliknięciem ... przynajmniej w chrome 33 ...

Dla przypomnienia, istnieje alternatywne rozwiązanie, które nie wymaga javascript. To trochę hack, wykorzystując fakt, że kliknięcie etykiety powoduje skupienie się na powiązanych danych wejściowych.

Potrzebujesz a <label>z odpowiednim foratrybutem (wskazuje na wejście), opcjonalnie stylizowanym na przycisk (z bootstrapem, użyj btn btn-default). Gdy użytkownik kliknie etykietę, zostanie otwarte okno dialogowe, na przykład:

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

Nie jestem pewien, jak przeglądarki radzą sobie z kliknięciami type="file"elementów (względy bezpieczeństwa i wszystko inne), ale to powinno działać:

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

Przetestowałem to JSFiddle w Chrome, Firefox i Opera i wszystkie pokazują okno dialogowe przeglądania plików.

Zawijam input[type=file]etykietę, stylizuję ją labelwedług własnych upodobań i ukrywam 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>

Rozwiązanie czysto CSS.

Niestety, jedynym sposobem jest utworzenie <input type="file">elementu, a następnie zasymulowanie kliknięcia.

Jest mała wtyczka (bezwstydna wtyczka), która wyeliminuje ból związany z koniecznością robienia tego przez cały czas: 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
        })
    })

Najlepsze rozwiązanie, działa we wszystkich przeglądarkach ... nawet na urządzeniach mobilnych.

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

Ukrywanie typu pliku wejściowego powoduje problemy z przeglądarkami, krycie jest najlepszym rozwiązaniem, ponieważ nie jest ukrywany, po prostu się nie wyświetla. :)

Ze względów bezpieczeństwa nie można tego zrobić w różnych przeglądarkach. To, co zwykle robią ludzie, to nakładanie pliku wejściowego na coś innego i ustawianie jego widoczności na ukrytą, aby był uruchamiany samodzielnie. Więcej informacji tutaj.

Upewnij się, że używasz wiązania, aby uzyskać właściwości komponentów w 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>)
  }
}

Korzystając z jQuery, możesz wywołać click()symulację kliknięcia.

To zadziałało dla mnie:

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

Dla tych, którzy chcą tego samego, ale używają 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>