Click event for file input type?

I am trying to implement an image/file uploader javascript component in my MVC project.

The uploader jquery component is bound to a form element that contains a <input type="file" />

In my situation I am on a user edit profile page where the fields are naturally encapsulated with a <form>开发者_开发百科 But for this jquery component I have to bind the uploader to a form element.

This provides a unique problem for me as you cannot really have a form inside of a form..

I have changed the element to be a element but then the onclick event for the input is not fired but the drag and drop uploading works still. My question is how to overcome this onclick event problem? or is my understanding of whats happening a bit of the mark?

I want to be able to click on the div element and let the file browse window come up just as in a normal older type file uploader.

The component: http://aquantum-demo.appspot.com/file-upload

Thank you in advance.

EDIT

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

You can do this with 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();
});