文件输入类型的单击事件？

Question

我正在尝试在我的 MVC 项目中实现图像/文件上传器 javascript 组件。

上传器 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();
});