2016-04-30 36 views
0

我有以下代碼:INPUT TYPE =「文件」的onclick工作,但文件選擇犯規顯示

<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或類似的東西覆蓋。任何想法?

回答

0

該問題是由於我在a內嵌套input而引起的。這不是有效的HTML。但是,如果我不使用Angular,它可能會有效,如果它沒有src屬性,則任何點擊任何<a>都不會執行任何操作。

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解決了問題。

0

在您的代碼中,單擊警告框中的確定按鈕後,會出現文件對話框。 Click Here

Please see my code in the above Link.