Программно вызвать диалоговое окно «Выбрать файл»

Question

У меня есть скрытый элемент ввода файла.Можно ли вызвать диалоговое окно select file из события нажатия кнопки?

Answer 1

Если вам нужна собственная кнопка для загрузки файла вместо <input type="file" />, вы можете сделать что-то вроде:

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

Обратите внимание, что я использовал visibility: hidden вместо display: none. Вы не можете вызвать событие click для не отображаемого файла ввода.

Answer 2

Большинству ответов здесь не хватает полезной информации:

Да, вы можете программно щелкать элемент ввода с помощью jQuery / JavaScript, но только если вы делаете это в обработчике события, принадлежащем событию THБыл запущен пользователем!

Так, например, ничего не произойдет, если вы, скрипт, программно нажмете кнопку в обратном вызове ajax, но если вы добавите ту же строку кода в событиеобработчик, который был поднят пользователем, он будет работать.

PS Ключевое слово debugger; разрушает окно просмотра, если оно находится перед программным щелчком ... по крайней мере, в chrome 33 ...

Answer 3

Только для записи, есть альтернативное решение, не требующее 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" />

Answer 4

Я не уверен, как браузеры обрабатывают клики на type="file" элементах (проблемы безопасности и все), но это должно работать:

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

Я тестировал этот JSFiddle в Chrome, Firefox и Opera, и все они показывают диалог просмотра файлов.

Answer 5

Единственный способ - создать элемент <input type="file">, а затем, к сожалению, смоделировать щелчок.

Есть крошечный плагин (бесстыдный плагин), который избавит вас от необходимости делать все это.время: файл-диалог

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

Answer 6

Я обертываю 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>

Purely CSS Solution.

Answer 7

Лучшее решение, работает во всех браузерах ... даже на мобильных устройствах.

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

Скрытие типа входного файла вызывает проблемы с браузерами, прозрачность - лучшее решение, потому что она не скрывается, просто не отображается. :)

Answer 8

По соображениям безопасности не существует кросс-браузерного способа сделать это. Обычно люди накладывают входной файл поверх чего-то другого и устанавливают его видимость скрытым, чтобы он запускался сам по себе. Подробнее здесь.

Answer 9

Убедитесь, что вы используете привязку для получения реквизита компонента в РЕАКТ

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

Answer 10

Для тех, кто хочет того же, но использует 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"/>