无法读取未定义/类型错误的属性“目标”：事件未定义答案

【问题标题】：Cannot read property 'target' of undefined / TypeError: event is undefined无法读取未定义/类型错误的属性“目标”：事件未定义
【发布时间】：2016-11-26 19:21:30
【问题描述】：

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

无法读取 undefined(...) 的属性“目标”（在 Chrome 中）

TypeError: 事件未定义（在 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 事件代码

<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%;
}

【问题讨论】：

你应该考虑使用URL.createObjectURL(file)而不是使用FileReader

标签： javascript jquery html css asp.net-mvc

【解决方案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

【讨论】：

@TittiTowel 欢迎您，如果问题现在已解决，请不要忘记关闭问题；)

【解决方案2】：

我没有测试过你的代码，但是如果你想让你的 open 函数被传递给事件对象，你应该在 onchange 属性定义中将它指定为 event 而不是 e，因为这不是对事件本身的赋值，但是已经传递了event 参数的回调函数体：

@onchange = "open(event)"

【讨论】：