Question

我正在尝试在我的应用程序中将图像用作文件类型按钮，但是单击图像时该函数正在执行但按钮document.getElementById("myFile").click();未执行。我的代码怎么了？

HTML：

  <div align="center">
      <a href="#" id="other-color" onClick='loadFile()'><img style="width:75px;height:auto" src="icons/slr-camera-2-256.png"/></a>
      <input type="file" id="myFile" style="display:none" />
    </div>

脚本：

 function loadFile()
        {

            alert("test");
            document.getElementById("myFile").click();
        }

Answer 1

您可以尝试使用JQuery：

 <input type="file" id="FileInput" style="display: none"/>
 <img src="abc.png" id="UploadPic" style="cursor: pointer;" />

和JQuery：

<script type="text/javascript">
  $(document).ready(function(){
      $("#FileInput").change(function() {
      $("#UploadPic").click();
     });
  });
</script>

Answer 2

为了保持安全，请将您的JS与HTML分开。您不是第一个遇到嵌入HTML的JS事件问题的人。我发现这两个问题最好解决了。

这是一个单独的版本。

DEMO

HTML

<div align="center"> <a href="#" id="other-color"><img style="width:75px;height:auto" src="icons/slr-camera-2-256.png"/></a>

    <input type="file" id="myFile" style="display:none" />
</div>

JS

var a = document.getElementById('other-color');
a.onclick = loadFile;

function loadFile() {
    alert("test");
}

Answer 3

通过（SpYk3HH）JsFiddle检查此解决方案或者您可以使用以下内容：

$('#myFile').show();
$('#myFile').focus();
$('#myFile').click();
$('#myFile').hide();

Florin Mogos的想法是在点击事件之前使它们可见并集中。

Answer 4

您可以使用触发器

<强> HTML

<div align="center">
   <a href="javascript:void(0);" id="other-color"><img style="width:75px;height:auto" src="icons/slr-camera-2-256.png"/></a>
   <input type="file" id="myFile" style="display:none" />
</div>

<强>的jQuery

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $('#other-color').click(function(){
        $('#myFile').trigger('click');
    });
});
</script>

点击事件的问题

4 个答案: