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