如何显示我使用指令上传到控制器的图片
How to display a pic that I uploaded to my controller using my directive
老实说,这是我第一次尝试在JS中使用图片上传。我正在处理一个Angular项目,该项目需要从用户上传图片并在页面上显示。(很像我们在脸书上上传我们的个人资料图片,唯一的区别是,这个页面稍后会以pdf格式下载)。
看到ng模型不适用于文件类型,我很失望。我尝试了很多事情,最终做出了一个指令,将文件带到我的控制器(从这里得到了帮助)。
现在我的$scope.myPic变量中有了文件。如何使用此文件。如何显示。。我尝试直接绑定变量{{myPic}},但没有成功。我尝试使用(#id).value()。将其存储在变量和绑定中,但没有成功。
还有其他几件事我试过了,但都忍不住了。
有人能提供将用户从系统上传的图像绑定到Angular中的HTML页面的方法吗。任何好的链接都将不胜感激。。。
FYI:
我的指令fn:
function uploadPicFn($parse) {
return {
restrict: 'A',
link: function(scope, element, attrs) {
var model = $parse(attrs.picModel);
var modelSetter = model.assign;
element.bind('change', function(){
scope.$apply(function(){
modelSetter(scope, element[0].files[0]);
});
});
}
};
};
我的html:
<div class="aw_textarea">
<label>That's me:{{home.myPic}}</label></br>
<input class="pd_txtarea" type="file" pic-model="home.myPic"/>
</div>
这可以通过文件读取器来完成。
你已经提到你得到了这里的帮助。因此,我更新了那篇文章中的jsfiddle,提供了关于如何使用FileReader的非常基本的代码示例。看看jsfiddle
link: function(scope, element, attrs) {
var model = $parse(attrs.fileModel);
var modelSetter = model.assign;
var img = element.parent().children()[2];
var reader = new FileReader();
reader.onload = function (e) {
angular.element(img).attr('src', e.target.result);
}
element.bind('change', function(){
scope.$apply(function(){
modelSetter(scope, element[0].files[0]);
});
reader.readAsDataURL(element[0].files[0]);
});
}
相关文章:
- 在指令控制器中使用$attrs时出现问题
- 从控制器继承了隔离的作用域以生成可重用的指令
- 指令中的控制器问题
- 如何将角度输入指令数据传递给控制器
- 当使用控制器作为语法时,如何从父指令继承属性
- 将指令绑定到控制器属性
- Angularjs在获得指令中的输出后,将值分配给控制器
- 将方法从控制器注入到未使用右变量调用的指令
- Angular,从指令控制器中的控制器触发函数
- 如何在指令链接函数中使用从控制器传递的筛选器
- 角度控制器功能赢得'不按指令工作
- 角度指令控制器:参数不是函数,未定义
- 通过指令在控制器中执行javascript函数
- AngularJS执行指令模板中的控制器函数
- AngularJS中的控制器/指令继承
- 在同一元素上使用“控制器作为 x”的多个 ng 控制器指令
- AngularJS ng控制器指令不接受javascript中的变量(作用域函数),也不给出任何错误
- 如何在AngularJS中测试控制器指令
- 控制器+指令中的角度范围
- AngularJS:使用在控制器/指令中别处定义的自定义javascript函数