Question

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

无法阅读财产＆＃39;目标＆＃39;未定义的（...）（在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%;
}

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添加到hover css规则中，如下所示：

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

jsFiddle example

Answer 2

我还没有对您的代码进行测试，但如果您希望将open函数传递给事件对象，则应在event中将其指定为e而不是onchange 1}}属性定义，因为这不是对事件本身的赋值，而是已经传递了event参数的回调函数体：

@onchange = "open(event)"

无法阅读财产＆＃39;目标＆＃39; of undefined / TypeError：事件未定义

2 个答案:

选项1）首选方法

选项2）