[英]How to bind image source to file object in angular
我有两个元素,一个文件,另一个图像
<input type='file' id='myfile' />
<img id='myImg' >
当我使用文件浏览器选择图像时,应使用所选图像更新图像对象,如何使用角度来实现此目的?
为此使用FileReader。 例如:
HTML
<div ng-app="app" ng-controller="Controller">
<img ng-src="{{loadedFile}}" alt="" />
<input type="file" value="load" onchange="angular.element(this).scope().fileLoaded(this)" />
</div>
码
function Controller($scope) {
$scope.fileLoaded = function (e) {
var tgt = e.target || window.event.srcElement,
files = tgt.files,
fileReader;
if (FileReader && files && files.length) {
var fileReader = new FileReader();
fileReader.onload = function () {
$scope.loadedFile = fileReader.result;
$scope.$apply();
}
fileReader.readAsDataURL(files[0]);
} else {
// Not supported
}
};
});
执行此操作的Javascript方法是onchange事件是
var file = event.target.files[0];
var reader = new FileReader();
reader.onload = function (e) {
$('#myImg').attr('src', e.target.result);
}
reader.readAsDataURL(file);
我在Angular中需要它
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.