我有两个元素,一个文件和另一个图像
<input type='file' id='myfile' /><br/>
<img id='myImg' >
当我使用文件浏览选择图像时,我的图像对象应该使用所选图像进行更新 我如何使用 Angular 来实现这一点?
最佳答案
为此使用 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 - 如何以 Angular 将图像源绑定(bind)到文件对象,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27099025/