Нажмите событие для типа ввода файла?

Question

Я пытаюсь реализовать компонент javascript для загрузки изображений / файлов в моем проекте MVC.

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

В моемЯ нахожусь на странице профиля редактирования пользователя, где поля естественно инкапсулированы <form>. Но для этого компонента jquery я должен привязать загрузчик к элементу формы.

Это создает для меня уникальную проблему, так каквы действительно не можете иметь форму внутри формы ..

Я изменил элемент на элемент, но затем событие onclick для ввода не запускается, но загрузка с перетаскиванием все еще работает.Мой вопрос, как преодолеть эту проблему события onclick?или мое понимание того, что происходит, немного отличается?

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

Компонент: http://aquantum -demo.appspot.com / file-upload

Заранее спасибо.

РЕДАКТИРОВАТЬ

<form action="<?= URL; ?>/users/op/<?php echo ( $this->op === 'edit' ) ? 'edit' : 'add' ?>" method="post" id="item-form" name="item-form" enctype="multipart/form-data">
<!-- Some other fields here -->
<!-- The file upload component -->
<div id="file_upload">
    <input type="file" name="file" />
    <button>Upload</button>
    <div>Upload profile picture</div>
</div>
</form>

Answer 1

Вы можете сделать это с помощью jQuery:

// registers click event on file upload div
$('#file_upload div').click(function() {
    // simulates a click on the file input field
    $('#file_upload input').click();
});