Question

很抱歉，如果您发现此问题重复，但我环顾四周，尝试过，失败了，所以需要您的帮助。

one.html

 <html>
    <head>
    <link rel="stylesheet" href="one.css" >
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="one.js"></script>
    </head>
    <body>
       <div class='some-class' id="add-image">
            <input type="file" id="myfile" style="display:none" />
            <h4> I want to open the file upload dilogue when anywhere of this div has been clicked</h4>
       </div>
   </body>
 </html>

one.css

.some-class{
border: 1px solid grey;
}

h4{
    text-align:center;
}

one.js

$("#add-image").click(function(){
  $("input[id='myfile']").click();
});

有时显示

不推荐使用event.returnValue。请改用标准的event.preventDefault（）。

有时

未捕获的rangeerror超出最大调用堆栈大小

我不知道发生了什么，如果它是jquery版本的问题？你能帮我么？一个工作代码示例或者一个jsfiddle？提前谢谢：）

Answer 1

您需要在dom ready处理程序中添加单击处理程序，因为执行one.js时，dom结构中不存在add-image元素

jQuery(function ($) {
    $("#add-image").click(function () {
        $("#myfile").click();
    });
})

Dom Ready

由于文件输入元素位于myfile元素内，因此触发文件元素上的click元素将导致递归错误callstack exceeded

解决方案是将文件元素移出myfile元素

<input type="file" id="myfile" style="display:none" />
<div class='some-class' id="add-image">
     <h4> I want to open the file upload dilogue when anywhere of this div has been clicked</h4>
</div>

演示：Fiddle

Answer 2

我瘦了你已经错过了dom准备好的处理程序。
试试这个：

$(document).ready(function(){
  $("#add-image").click(function(){
     $("#myfile").trigger('click');
  });
});

Answer 3

将您的HTML更改为

     <div class='some-class' id="add-image">
        <h4> I want to open the file upload dilogue when anywhere of this div has been clicked</h4>
    </div>
    <input type="file" id="myfile" style="display:none" />

隐藏输入类型='文件'在单击其父div时不会触发

3 个答案: