javascript - 无法读取未定义/TypeError : event is undefined 的属性 'target'

Question

我想通过单击带有 id='IBrowse' 的图像元素来上传图像，但是当我单击该图像时发生错误。

Cannot read property 'target' of undefined(…) (in Chrome)

TypeError: event is undefined (in Firefox)

<div class="col-md-12 col-sm-12 col-xs-12 form-group has-feedback pull-right bordered">
    <img id="HImg" src="~/b/b.jpg" style="height: 120px; max-width: 100%; width: 280px; position:relative", class="img-responsive" />
    <img id="IBrowse" src="~/a/a.png" style="position: absolute; width: 20%; top: 5%; left: 17%;" />

    @Html.TextBoxFor(m => m.Img, new { @class = "form-control has-feedback-left file btntag", style = "display: none;", @onchange = "open(e)", @type = "file", placeholder = "Upload Image" })
    @Html.ValidationMessageFor(m => m.Img, "", new { @class = "text-danger" })
</div>

$(function () {
    $('#IBrowse').on('click', function () {
        $('#Img').trigger('onchange');
    });
});

onchange event code

<script>
        var IsUpdate = false;
        var open = function (event) {
            var input = event.target;
            var reader = new FileReader();
            reader.onload = function () {

                var dataURL = reader.result;
                var output = document.getElementById('ImgHTMLElement');
                output.src = dataURL;
            };
            reader.readAsDataURL(input.files[0]);
        };
    </script>

另外，CSS 不工作:

#IBrowse:hover {
    width: 23%;
}

Answer 1

我从不使用 onchange所以也许有办法在那里做到这一点。但是，我会简单地删除 onchange="....."并使用这样的处理程序:

<script>
  var IsUpdate = false; 
  $('#Img').on('change', function(event) {
      var input = event.target;
      var reader = new FileReader();
      reader.onload = function() {

        var dataURL = reader.result;
        var output = document.getElementById('ImgHTMLElement');
        output.src = dataURL;
      };
      reader.readAsDataURL(input.files[0]); 
  });
</script>

至于您的 css 问题，问题是您定义了一个内联样式，例如:

<img id="HImg" src="~/b/b.jpg" style="height: 120px; max-width: 100%; width: 280px; position:relative", class="img-responsive" />

CSS 规则 #IBrowse:hover {width: 23%;}已应用，但它不会覆盖具有更高优先级的内联样式设置。你可以克服它

选项 1) 首选方法

将内联样式移动到 css 规则而不是像这样内联:

#IBrowse{
    position: absolute; 
    width: 20%; 
    top: 5%; 
    left: 17%;
}
#IBrowse:hover {
    width: 23%; 
}

jsFiddle example

---

选项 2)

保留内联样式并添加!important像这样的悬停CSS规则:

#IBrowse:hover {
    width: 23% !important; 
}

jsFiddle example