Програмно запустити діалогове вікно "вибрати файл"

У мене є прихований елемент введення файлу. Чи можливо запустити діалогове вікно вибору файла з події натискання кнопки?

Якщо ви хочете мати власну кнопку для завантаження файлу замість використання <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, але тільки якщо ви це робите в обробці подій, що належить до події, ЩО ЗАПОЧАЛИ ПОТРІБНИК!

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

PS debugger;Ключове слово порушує вікно перегляду, якщо воно перебуває до програмного клацання ... принаймні в хромірованному 33 ...

Тільки для запису існує альтернативне рішення, яке не вимагає JavaScript. Це трохи зламати, використовуючи той факт, що натискання на мітку задає фокус на пов'язаному вході.

Вам потрібен <label>відповідний forатрибут (вказує на вхід), опціонально стилізований як кнопка (із завантажувальним інструментом, використання 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">жаль, єдиний спосіб - це створити елемент і потім імітувати клацання, на жаль.

Є крихітний плагін (безсоромний штекер), який позбавить від необхідності робити це постійно: файл-діалог

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>