Question

我有以下代码：

<a id="newPhoto" class="new-image no-expand">
    <input onclick="alert('cocos')" type="file" style="display: block; position: absolute; z-index: 1500"/>
    <button class="btn btn-primary btn-upload clickable no-expand"
            style="font-family: Montserrat, 'Helvetica Neue', Helvetica, Arial, sans-serif;">
    <i class="fa fa-upload"></i> Upload
    </button>
    <br><br>
    <div title="Remove" class="btn-remove">
        <span class="glyphicon glyphicon-remove" style="color: white"></span>
    </div>
</a>

现在点击input时，会触发click对按钮的视觉效果，以及onclick事件处理程序，但由于某种原因弹出对话框让我选择文件没有。我也尝试删除任何CSS，并确保单击该确切项目，并且它不被其他div或类似的东西覆盖。有什么想法吗？

Answer 1

问题是由于我在input内嵌入a这一事实造成的。它不是有效的HTML。但是，如果我还没有使用Angular，那么它可能会有效，如果它没有<a>属性，会导致任何src上的任何点击无效。

var htmlAnchorDirective = valueFn({
restrict: 'E',
compile: function(element, attr) {
  if (!attr.href && !attr.xlinkHref) {
    return function(scope, element) {
      // If the linked element is not an anchor tag anymore, do nothing
      if (element[0].nodeName.toLowerCase() !== 'a') return;

      // SVGAElement does not use the href attribute, but rather the 'xlinkHref' attribute.
      var href = toString.call(element.prop('href')) === '[object SVGAnimatedString]' ?
                 'xlink:href' : 'href';
      element.on('click', function(event) {
        // if we have no href url, then don't navigate anywhere.
        if (!element.attr(href)) {
          event.preventDefault();
        }
      });
    };
  }
}
});

将容器更改为div解决了问题。

Answer 2

在您的代码中，单击警告框中的“确定”按钮后会出现文件对话框。Click Here

Please see my code in the above Link.

输入类型=＆＃34;文件＆＃34; onclick工作，但文件选择不显示

2 个答案: