Question

要用时尚的假上传按钮替换丑陋的文件上传按钮，我使用如下的jquery。

HTML

<input type='file' name='file' class='file_upload_btn' style='display:none'>
<button class='fake_upload_btn'>Upload Files</button>

的jQuery

$('.fake_upload_btn').click(function() {
    $('.file_upload_btn').click();
})

现在如果我想在Angularjs中做同样的事情，没有Jquery库依赖。

Answer 1

这是一种解决方法，我只在chrome中检查过它，但试试这个：

<label for="uploader">
   <button class='fake_upload_btn'>Upload Files</button>
   <input id="uploader" type='file' name='file' class='file_upload_btn' style='display:none' />
</label>

JSFiddle：http://jsfiddle.net/84Xxb/

点击button上的点击事件就像点击label一样，因此input也被“点击”了！

更新：但如果你想要一个真正的“Angulary”解决方案，你需要使用指令，如下所示：

app.directive('uploader', function () {
    return {
      template: "Upload Files <input type='file' name='file' class='file_upload_btn' style='display:none'>",
      link: function(scope, element, attrs) {   
        element.bind("click", function(){
          element.find("input")[0].click();
        });
      }
   }
});

工作示例：http://plnkr.co/edit/DVALMH?p=preview

Angularjs - 通过单击button1（假上传按钮）触发按钮2的单击事件

1 个答案: