У меня очень простая проблема. Всякий раз, когда я нажимаю на div, я хочу, чтобы data binding
применялся к вводу файла.
<div>click me</div>
<input type = "file" wire:model = "photo"> <!-- while clicking on div, it should do the data binding to this file input -->
Я искал его в документации, но не мог найти никакой подсказки. Возможно ли это сделать?
@haruk1515 Точно
Вы можете сделать то же самое с ярлыком, верно?
Okei я искал и тестировал, чтобы увидеть, смогу ли я это сделать, и есть решение с jquery:
<div id = "trigger">click me</div>
<input type = "file" id = "file_input" wire:model = "photo">
$("#trigger").unbind("click").bind("click", function () {
$("#file_input").click();
});
я отдам должное, где я нашел ответ:
срабатывание кнопки ввода файла
если ваша идея состоит в том, чтобы использовать только livewire, вы можете создать функцию
public function fileTrigger(){
$this->dispatchBrowserEvent('TriggerFilem');
}
добавьте это в js:
window.addEventListener('TriggerFilem', e => {
$("#trigger").unbind("click").bind("click", function () {
$("#file_input").click();
});
});
и в представлении:
<div wire:click = "fileTrigger()" id = "trigger">click me</div>
<input type = "file" id = "file_input" wire:model = "photo">
Редактировать:
Если вы не хотите использовать jquery, я тестировал решение только на js:
document.getElementById('trigger').addEventListener("click",() => {
document.getElementById('file_input').click();
});
Надеюсь, поможет!
Это хорошее решение, но я хочу без jQuery
. Даже во втором решении используется jQuery.
@ZainFarooq я добавил еще одно решение только для js, без jquery, надеюсь, это поможет
Я пробую это. надеюсь это работает
вы хотите открыть входной файл, когда вы нажимаете на div?