Angularjs – 通过单击button1(假上传按钮)触发按钮2的单击事件

发布时间：2020-12-17 17:45:09 所属栏目：安全来源：网络整理

导读：要用时尚的假上传按钮替换丑陋的文件上传按钮,我使用如下的 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(

要用时尚的假上传按钮替换丑陋的文件上传按钮,我使用如下的 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库依赖.

解决方法

这是一种解决方法,我只在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/

按钮上的Click事件就像点击标签一样被捕获,因此输入也被“点击”！

更新：但如果你想要一个真正的“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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!