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

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

1 个答案: