如何将图像源绑定到角度文件对象

How to bind image source to file object in angular

本文关键字：文件 对象 绑定 图像      更新时间：2023-09-26

>我有两个元素，一个文件和另一个图像

<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
        }
    };
});

看小提琴

您可以使用

ng-flow

从这里查看图库上传 http://flowjs.github.io/ng-flow/

希望对您有所帮助！

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 中需要它

相关文章：