如何將圖像源以角度綁定到文件對象

Question

我有兩個元素，一個文件，另一個圖像

<input type='file' id='myfile' />
<img id='myImg' >

當我使用文件瀏覽器選擇圖像時，應使用所選圖像更新圖像對象，如何使用角度來實現此目的？

Answer 1

為此使用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
        }
    };
});

---

看小提琴

Answer 2

您可以使用ng-flow

從此處http://flowjs.github.io/ng-flow/查看圖庫上傳

希望這對您有所幫助！

Answer 3

執行此操作的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中需要它